I am making a horizontal menu that is three levels deep. It works as intended for the first and second levels. However, when you hover over any of the first or second level menus, the third menu items are displayed.
Even more so, all third level menu items that are within the first level menu are displayed (all of the second level submenus). I have no idea how to correct this (I do, but I can’t figure out the combination of ul li…etc).
*I realize my CSS and html is sloppy (black ftw) – that is going to get fixed later. My main concern now is to get it working correctly.
#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>
I figured this solution out: