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 always 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 not been able to figure out the correct sequence to hide/display the third level menu items. Does anyone know how to fix/correct this, or have alternative ideas on how to go about doing this?

 

*I realize my CSS and html is sloppy, I make it look all pretty and optimize it later, once everything is working as intended (for cross-browser reasons).

 

    #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 don't care if this is not the way to do it, as soon as I finished it I burst out laughing, html/css is terrible I suck at designing webpages. It seems that display: block; is inherited by children and so for each :hover you need to set display: none; again.

 

#menu{
display: block;
background-color: yellow;
}

#menu li{
display: block;
}

#menu li ul{
display: none;
background-color: blue;
}

#menu li ul li{
display: none;
}

#menu li ul li ul{
display: none;
background-color: red;
}

#menu li ul li ul li{
display: none;
}

#menu li:hover ul{
display: block;
}

#menu li:hover ul li{
display: block;
}

#menu li:hover ul li ul{
display: none;
}

#menu li:hover ul li ul li{
display: none;
}

#menu li:hover ul li:hover ul{
display: block;
}

#menu li:hover ul li:hover ul li{
display: block;
}

 

<link rel="stylesheet" type="text/css" href="lol.css"/>
<ul id="menu">
<li>1
	<ul>
		<li>1
			<ul>
				<li>1</li>
			</ul>
		</li>
		<li>2
			<ul>
				<li>1</li>
			</ul>
		</li>
		<li>3
			<ul>
				<li>1</li>
			</ul>
		</li>
		<li>4
			<ul>
				<li>1</li>
			</ul>
		</li>
	</ul>
</li>
<li>2
	<ul>
		<li>1
			<ul>
				<li>1</li>
			</ul>
		</li>
	</ul>
</li>
<li>3
	<ul>
		<li>1
			<ul>
				<li>1</li>
			</ul>
		</li>
	</ul>
</li>
<li>4
	<ul>
		<li>1
			<ul>
				<li>1</li>
			</ul>
		</li>
	</ul>
</li>
</ul>

I think that's because there's no second or third class used, and thus you had to do it that way.

 

Thanks for clarifying what I needed to do. Much appreciated.

For my original code:

 

#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;
}

 

That was the problem solver, if anyone else has needed a more consolidated fix.