0
我正在制作一个三级深度的水平菜单。它按照第一级和第二级的预期工作。但是，当您将鼠标悬停在第一级或第二级菜单上时，会显示第三个菜单项。三级菜单项始终显示
此外，还会显示第一级菜单中的所有第三级菜单项（所有第二级子菜单）。我不知道如何解决这个问题（我这样做，但我无法弄清楚李丽的组合......等等）。
*我意识到我的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吗？ – Bazzz
并不是隐藏第三层'ul'，而是一个：悬停状态，该状态同样以'ul'为目标，并使其再次可见。你可能想为你的内部'ul'创建类，这样你就可以在悬停时定位每个'ul'。 – Joonas
这是一个他正在尝试做什么的js小提琴，将尝试自己看看它http://jsfiddle.net/muss/sJGzA/ – mustafa