我遇到了我制作的下拉菜单。 当我悬停一个菜单项时,会出现一个下拉列表,但我似乎无法点击下拉列表项,因为下拉列表和菜单之间有一个空格。
这是我的代码:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
float : right;
padding: 0px 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #fff;
}
nav ul li:hover a {
color: #000;
}
nav ul li a {
display: block; padding: 0px 10px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #fff; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 0px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
有没有人有想法?
中看到代码TY
ķ
答案 0 :(得分:0)
添加 左:0
到你的导航ul ul(下拉菜单) 并从nav ul li中删除margin-bottom(它从你的base.css继承了一些余量,你可以看到如果你使用firebug会发生什么)
答案 1 :(得分:0)
基本上,当您将li:
悬停时,会显示ULHTML
<ul>
<li>one</li>
<li>two
<ul class="sub">
<li>sub one</li>
<li>sub two</li>
</ul>
</li>
</ul>
CSS
ul li ul {
display:none;
position:absolute;}
ul li:hover ul.sub {
display:block;
}
希望有所帮助!
答案 2 :(得分:0)
您应该删除现在拥有的ul边距。所以这是一个可能的解决方案:
ul li ul {
margin-left: 0;
}
您甚至应该删除下拉菜单顶部的边距。我无法点击它,因为它滑倒了!