Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical (pop out) menu almost works

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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;*/
    }
    Last edited by Excavator; 12-18-2012 at 03:06 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    GedC (12-19-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by GedC View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •