CSS 下拉菜单 : nav ul ul li Moved to Right

Question

这是一张图片:

问题是 nav ul ul li 向右移动，如图所示，“联系人”选项卡向右移动，因此大小不是我想要的。我希望“联系人”选项卡的大小与“关于”的大小相同。

这是我的代码:

(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 的 padding left 设置为 0。

下面的代码应该可以工作。这也是我的代码笔的链接 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;
}