这是一张图片:
问题是(你可以看到):“页面”按钮太低,无法点击。我想要的是它应该靠近“联系人”。
现在是代码:
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
最佳答案
查看此演示:http://jqversion.com/#!/uMti6vc
我已经更改了 ul ul ul
元素的 top
属性
nav ul ul ul {
position: absolute;
left: 100%;
top: -50px;
}
关于HTML 下拉菜单 : "nav ul ul ul li" Too Low,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23321198/