我有一个带有子菜单的 CSS 菜单,每个子菜单列表项之间有 1px 的间距。这个问题主要出现在IE中,但除非你非常快速地移动光标,否则当鼠标悬停在两个子菜单项之间时,子菜单会消失(由于1px的空间)。如何在保持 1px 空间的同时阻止这种情况发生?
<nav id="menu" class="sixteen columns">
<ul id="nav">
<li><a href="#">Home</a>
<ul>
<li><a href="#">drop 1</a></li>
<li><a href="#">drop 1</a></li>
<li><a href="#">drop 1</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
#menu {
position: relative;
z-index: 999;
}
ul#nav {
margin: 0;
padding: 1px 0;
width: auto;
}
/* start first level nav items */
ul#nav li {
float: left;
padding: 4px;
list-style: none;
list-style-image: none;
}
ul#nav li a {
font-size: 13px;
text-decoration: none;
display: block;
text-align: left;
padding: 3px 9px;
white-space: nowrap;
text-transform: uppercase;
color: #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#nav li.current a, ul#nav li a:hover {
color: #fff;
background: black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#nav li ul {
position: absolute;
width: 10em;
left: -999em;
margin:0px;
padding:0px;
}
ul#nav li ul li {
padding: 0;
margin: 1px 0;
}
ul#nav li ul li a,
ul#nav li.current ul li a {
width: 200px;
background-color: #000;
line-height: 26px;
color: #fff;
}
ul#nav li ul li a:hover,
ul#nav li.current ul li a:hover {
background-color: #FA891C;
color: #fff;
}
最佳答案
去掉 1px 的边距并添加一个 1px 的分隔符作为悬停元素的一部分。
ul#nav li ul li {
padding: 0;
margin: 1px 0; /* change to margin:0px;*/
}
还有……
ul#nav li.current ul li a {
border-bottom: 2px solid transparent; /*Add this*/
padding: 0px; /*And this*/
width: 200px;
background-color: #000;
line-height: 26px;
color: #fff;
}
并添加这个CSS
.subMenu1
{
margin-left:10px; /* adjust as needed */
}
然后像这样将子菜单项包装在一个 div 中:
<li><a href="#"><div class="subMenu1">drop 1</div></a></li>
关于html - 在间隔的子菜单项之间悬停时,如何阻止我的子菜单消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16550814/