【发布时间】：2012-08-17 04:27:53
【问题描述】：
我正在制作一个三层深的水平菜单。它按预期用于第一级和第二级。但是，当您将鼠标悬停在任何一级或二级菜单上时，将显示第三级菜单项。
更重要的是，第一级菜单中的所有第三级菜单项都会显示（所有第二级子菜单）。我不知道如何纠正这个问题（我知道，但我不知道 ul li...等的组合）。
*我意识到我的 CSS 和 html 很草率（黑色 ftw）——这将在以后得到修复。我现在主要关心的是让它正常工作。
#menu ul {
margin: 0;
padding: 0;
position:relative;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom-style:solid;
border-width:2.3px;
border-color:black;
padding-left:0px;
/*background:url(./images/fillers/vvv.png);*/
}
#menu ul li {
/* position: relative; */
}
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
top: 0;
display: block;
}
#menu li:hover ul {
display: block;
}
#menu li:hover ul {
visibility:visible;
}
#menu ul ul {
visibility:hidden;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: white;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Hover Styles */
#menu ul li:hover, #menu ul li a:focus {
background-color:#5a5a5a;
color:white;
background:url(./images/fillers/vvv.png);
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: white;
text-align:center;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: white;
}
#menu li ul a.noLink:hover, #menu li ul a.noLink, #menu .noLink, #menu li ul .noLink, #menu li a.noLink {
color: grey;
}
/* Icon Styles */
#menu ul a.submenu {background: url("r_arrow.gif") no-repeat right; }
#menu ul a.submenu:hover {background: url("r_arrow.gif") no-repeat right;}
<div id=menu>
<ul id=menuList>
<li>
<a href="#" name="submenu" class="submenu">Tournaments</a>
<ul>
<li>
<a href="#" name="submenu" class="submenu">2011</a>
<ul>
<li><a href="#"> 1, 2, 3</a></li>
<li><a href="#"> 4, 5, 6</a></li>
<li><a href="#"> 7, 8, 9</a></li>
<li><a href="#"> 10</a></li>
</ul>
</li>
<li>
<a href="#" name="submenu" class="submenu">2012</a>
<ul>
<li><a href="#">Season 1</a></li>
</ul>
</li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a href="#" name="submenu" class="submenu">---</a>
<ul>
<li>
<a href="#" name="submenu" class="submenu">2011</a>
<ul>
<li><a href="#">1, 2, 3</a></li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">Leagues</a>
<ul>
<li><a class="noLink">2011</a></li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">---</a>
<ul>
<li>
<a class="noLink" name="submenu" class="submenu">2011</a>
<ul>
<li><a class="noLink">---</a></li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
</ul>
</div>
【问题讨论】：
-
你能做一个显示问题的 JSFiddle 吗？
-
不是第三级
ul没有隐藏，而是一个 :hover 状态也以ul为目标并使其再次可见。您可能想为您的内部ul制作课程，以便您可以在悬停时定位每个人ul。 -
这是他正在尝试做的一个js小提琴，将尝试自己看看jsfiddle.net/muss/sJGzA
-
我查了课程，但仍然对建议的内容感到困惑。我还有什么其他选择？
-
解决方法：
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{ display:none; } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{ display:block; }
标签： css