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