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

这是一张图片：

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

现在是代码：

HTML

• Home
• About
  • Contact
    • Page

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