Jump to content

Third-Level Menu Items Are Always Showing


InkofDeath
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.