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

Question

这是一张图片：

问题是nav ul ul li向右移动，如图中所示，标签＆＃34; Contact＆＃34;向右移动，因此尺寸不是我想要的。我想要标签＆＃34;联系＆＃34;具有相同大小的＆＃34;关于＆＃34;。

这是我的代码：

（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

Answer 1

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

以下代码应该有效。此处还有指向我的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;
}

Answer 2

您好，您需要添加一个额外的规则，如下所示

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

只需添加此规则，然后就可以了。我认为最好给出一个关于ul li ul的规则，因为它是它的容器。之后，您可以更好地控制它。

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

Answer 3

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