CSS下拉菜单：nav ul ul li已移至右侧

Here is an image :

这是一张图片:

CSS下拉菜单：nav ul ul li已移至右侧 The problem is the nav ul ul li moved to the right, as seen in the image, the tab "Contact" moved to the right, and thus the size was not what I want. I want the tab "Contact" to have the same size of "About".

问题是导航器向右移动,如图所示,“联系人”选项卡向右移动,因此尺寸不是我想要的。我希望“联系人”选项卡具有相同的“关于”大小。

This is the code of mine :

这是我的代码:

(HTML)

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

(CSS)

/* Basic Styling */

a {
  text-decoration:none;
  color:inherit;
}

/* Menu Styling */

nav > ul > li {
  display:inline-block;
  width:200px;
  height:50px;
  line-height:50px;
  margin:0px;
  padding:0px;
  background-color:#dddddd;
  text-align:center;
}

nav ul li:hover {
  background-color:#aaaaff;
}

nav ul ul {
  display:none;
}

nav ul li:hover > ul {
  display:block;
  position:relative;
}

nav ul li:hover > ul > li {
  display:block;
  width:400px;
  height:80px;
  line-height:80px;
  padding:0px;
  margin:0px;
  text-align:center;
  position:relative;
}

nav ul li {
  float: left;
}

nav ul ul li,
nav ul ul li a {
  display:block;
}

Fiddle

3 个解决方案

#1

The problem was that the width and heights for the list items in the inner ul were different than the ones in the outer ul. To fix the indentation I set padding left to 0 for your inner ul.

问题是内部ul中列表项的宽度和高度与外部ul中的列表项的宽度和高度不同。为了修复缩进,我将内部ul的填充设置为0。

The code below should work. Also here is a link to my codepen http://cdpn.io/ivJxc

下面的代码应该有效。这里还有我的codepen http://cdpn.io/ivJxc的链接

/* Basic Styling */

a {
  text-decoration:none;
  color:inherit;
}

/* Menu Styling */

nav > ul > li {
  display:inline-block;
  width:200px;
  height:50px;
  line-height:50px;
  margin:0px;
  padding:0px;
  background-color:red;
  text-align:center;
}

nav ul li:hover {
  background-color:#aaaaff;
}

nav ul ul {
    display:none;
    padding-left:0; 
}

nav ul li:hover > ul {
  display:block;
  position:relative;
}

nav ul li:hover > ul > li {
  display:block;
  width:200px;
  height:50px;
  line-height:50px;
  padding:0px;
  text-align:center;
}

nav ul li {
  float: left;
}

#2

Hi you need to add one additional rule, it is something like below

嗨,你需要添加一个额外的规则,它是如下所示

ul li ul {
  padding: 0;
  position: absolute;
  left: 0;
  width: 200px;
}

simply add this rule in, then it will work. I consider it is better to give a rule on ul li ul, as it is the container of its li. Later, you can have more control over it.

只需添加此规则,它就会起作用。我认为最好给出一个关于ul li ul的规则,因为它是它的容器。之后,您可以对其进行更多控制。

check the jsFiddle http://jsfiddle.net/wenbolovesnz/J7T9M/

检查jsFiddle http://jsfiddle.net/wenbolovesnz/J7T9M/

#3

nav ul ul li{
    width: 200px;
    background-color:#dddddd;
}
nav ul ul {
    padding: 0;
  display:none;
}

#1