HTML下拉菜单：＆＃34; nav ul ul ul li＆＃34;太低

Question

这是一张图片：

问题是（你可以看到）：“页面”按钮太低，无法点击。我想要的是它应该靠近“联系方式”。

现在是代码：

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Contact</a>
          <ul>
            <li><a href="#">Page</a></li>
          </ul>
        </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;
    list-style:none;
    padding-left:0; 
}

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

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

nav ul li {
  float: left;
}

nav ul ul li {
  margin:0px;
  padding:0px;
}

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

nav ul ul ul {
    position: absolute;
  left: 100%;
  top: 0;
}

nav ul ul li {
  position: relative;
  top:0;
}

除此之外没有其他问题 检查jsfiddle：fiddle

Answer 1

请参阅此演示：http://jqversion.com/#!/uMti6vc

我更改了top元素的ul ul ul属性

nav ul ul ul {
  position: absolute;
  left: 100%;
  top: -50px;
}