Vertical (pop out) menu almost works

GedC · 12-18-2012, 09:45 AM

For some time now I've trying to get my head round drop down / pop out menus using only CSS. I think I've just about got the hang of the horizontal drop down menus so now I've turned my attention to vertical pop out menus.

The code I've shown below very nearly works fine but there is one fault that I cannot remedy. When you hover the cursor over the top level menu, the relevant item changes color and font-weight, as it's supposed to, but as you move the curor to the right it gets to a point where it reverts to its original states before you actually move off the item altogether.

I must also add that I realise that putting the CSS and HTML in the same file is not good practice : I only did it to save myself the trouble of jumping from file to file as I tried to fix this problem.

Any help would be greatly appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
  <meta name="created" content="Fri, 07 Dec 2012 16:41:20 GMT" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
 
 <style>
 body{
     background-color: #eaebed;
     font-family : verdana, tahoma, arial, serif;
     font-size: 85%;
     margin-top : 0px;}
     
#page{
      width : 960px;
      margin-left : auto;
      margin-right : auto;
      margin-top : -14px;
      margin-bottom : -14px;
      background-color : rgb(175, 175, 175);}
p{
  padding : 15px 15px;}

#nav {
	margin-left : 0px;
	padding-left : 0px;} 

#nav li {
	list-style : none;
	width : 150px;
	display : block;}
 
#nav li a{
	display : block;
	text-decoration : none;
	background : #036;
	padding-left : 8px;
	line-height : 29px;
	color : #fff;
	border-bottom : solid 1px #fff;
	width : 150px;}

#nav li ul{
	display : none;}

#nav li:hover ul{
	display : block;
	position : absolute;
	margin-top : -30px;
	margin-left : 110px;}

#nav li:hover li{
	float : none;
	width : 150px;}
	
#nav li:hover li a{
	border-bottom : solid 1px #fff;
	background : #03e;}
	
#nav li:hover li a:hover{
	background : red;
 	font-weight : bold;}
	
#nav li:hover a:hover{ 
	background : green;
	font-weight : bold; }

#left{
	float : left;
	width : 175px;}

#right{
	float : left;
	width : 600px;}

#middle{
	clear : both;}

</style> 

</head>
<body>
	<div id = "page">
		<div id = "left">
		<br />
		<ul id = "nav">
			<li><a href = "#">Top Level Item 1</a>
				<ul>
					<li><a href = "#">Sub Item 1.1</li></a>
					<li><a href = "#">Sub Item 1.2</li></a>
					<li><a href = "#">Sub Item 1.3</li></a>
				</ul>
			</li>
			<li><a href = "#">Top Level Item 2</a>
				<ul>
					<li><a href = "#">Sub Item 2.1</li></a>
					<li><a href = "#">Sub Item 2.2</li></a>
					<li><a href = "#">Sub Item 2.3</li></a>
				</ul>
			</li>
			<li><a href = "#">Top Level Item 3</a>
				<ul>
					<li><a href = "#">Sub Item 3.1</li></a>
					<li><a href = "#">Sub Item 3.2</li></a>
					<li><a href = "#">Sub Item 3.3</li></a>
					<li><a href = "#">Sub Item 3.4</li></a>
					<li><a href = "#">Sub Item 3.5</li></a>
					<li><a href = "#">Sub Item 3.6</li></a>
				</ul>
			</li>	
		</ul>
		</div>
		<div id = "right">
		<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>	
		</div>
		<div id = "middle">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>	
	</div>		
	</div><!-- End of page div -->
	
</body>
</html>

Excavator · 12-18-2012, 03:04 PM

Hello GedC,
Your ul that flys out covers that right 40px or so on the parent.

When you use absolute positioning on your flyout ul, you need to use positioning instead of margin.

Look at these changes to your CSS -

Code:

#nav li {
	list-style : none;
	/*width : 150px;
	display : block;  --li is already block level*/
  position: relative;
}
 
#nav li a{
	display : block;
	text-decoration : none;
	background : #036;
	padding-left : 8px;
	line-height : 29px;
	color : #fff;
	border-bottom : solid 1px #fff;
	width : 150px;
}

#nav li ul {
  padding: 0;
	display : none;
}

#nav li:hover ul{
	display : block;
	position : absolute;
  top: 0;
 left: 158px;
	/*margin-top : -30px;
	margin-left : 110px;*/
}

GedC · 12-18-2012, 05:20 PM

Many thanks, Excavator!

Your help is much appreciated.

As you can see I am relatively new to this forum. How do I officially thank you for your help? By that I mean how can I thank you in such a way that your number of "thanks" increases?

Thanks again! You know, I could've looked at that code for months and months and not realised my mistakes.

GedC

Excavator · 12-18-2012, 05:46 PM

Quote:

Originally Posted by GedC

As you can see I am relatively new to this forum. How do I officially thank you for your help? By that I mean how can I thank you in such a way that your number of "thanks" increases?

Haha, big green Thanks button to the right in your reply. Thanks for the thanks

Some menu examples that might interest/help you here.