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
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Unhappy Simple drop down menu

    Hi all

    Am getting frustrated with myself right now.

    Am attempting my first simple drop down menu and it almost works.
    When you hover on the menu item the drop down appears but when you move the mouse to one of the items on the drop down it vanishes.

    I'm sure its just 1 tiny little bit I'm missing or done wrong. Can anyone help please!!??

    Iv done some investigation and some people are saying about Javascript and I really don't want to use that for this. Others have said about the z-index but I'm not to sure for what and where!!

    Code:
    /*navigation bar*/
    .nav ul {
    	margin:2px;
    	padding:5px;
    	font-size:20px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .nav li {
    	position:relative;
    	list-style-type:none;
    	float: left;
    	display:inline;
    	padding:0 10px 0 10px;
    	font-size:20px;
    	font-weight:bold;
    	
    }
    
    .nav li ul {
    	position:absolute; 
    	left:-9999px; 
    	top:-9999px; 
    	list-style-type:none;
    }
    
    .nav li:hover {
    	position:relative;
    }
    
    .nav li:hover ul 	{
    	left:0px; 
    	top:29px;   
    	z-index:100;
    }
    
    .nav li:hover ul li a 	{
    	display:block; 
    	width:90px;
    	height:30px;
    	border:thin solid #000; 
    	background-color:#F60;
    	padding-left:8px;
    }
    
    /*end navigation bar*/
    Code:
    <div id="nav_bar">
    <ul class="nav">
    <li><a href="#">|Home|</a></li>
    <li><a href="#">|About|</a>
    	<ul>
        <li><a href="#">Aims</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Team</a></li>
        </ul>
        </li>
    <li><a href="#">|Services|</a></li>
    <li><a href="#">|Contact|</a></li>
    <li><a href="#">|Blog|</a></li>
    </ul>
    </div>
    Thanks very much

    C
    Hmmmm......scratchy head time......

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Nothing to do with z-index and no need for javascript. Because of this css:

    Code:
    .nav li:hover ul 	{
    	left:0px; 
    	top:29px;   
    }
    the top of the drop-down ul does not touch its parent li. Consequently when you hover the parent the drop down appears but as you move the mouse down the hover state is lost and the drop down disappears. Change that 29px to 24px and it's fine, at least in FF. If problems perisist in other browsers try reducing that amount a little more.

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    See I knew it would be something so bloody simple!!

    Thanks very much SB65, really appreciate it!

    C
    Hmmmm......scratchy head time......

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    OK another problem with my menu.

    On the top level I have a image that comes up behind the text on hover. I want the same image to appear on the drop down menu to but whenever i try the code it just continually shows the image and I want it to just show when you hover over the menu item. any ideas?

    current css (see above for html)
    Code:
    /*navigation bar*/
    .nav ul {
    	padding:5px;
    	font-size:20px;
    	margin-left:auto;
    	margin-right:auto;
    }
    
    .nav li {
    	position:relative;
    	list-style-type:none;
    	float: left;
    	display:inline;
    	margin-left:2px;
    	padding:0 10px 0 10px;
    	font-size:18px;
    	font-weight:bold;
    	
    }
    
    .nav li:hover {
    	background-image:url(images/nav_ro.png);
    	background-repeat:no-repeat;
    	background-position:center;
    }
    
    
    
    .nav li ul {
    	position:absolute; 
    	left:-9999px; 
    	top:-9999px; 
    	list-style-type:none;
    }
    
    .nav li:hover {
    	position:relative;
    }
    
    .nav li:hover ul 	{
    	left:0px; 
    	top:23px;  
    	z-index:1;
    }
    
    .nav li:hover ul li 	{
    	height:30px; 
    	border:none;
    }
    
    .nav li:hover ul li a 	{
    	display:block; 
    	width:180px;
    	height:30px;
    	border:thin solid #000; 
    	background-color:#F60;
    	padding-left:8px;
    	font-size:18px;
    }
    
    /*end navigation bar*/
    thanks muchly in advance!

    C
    Hmmmm......scratchy head time......


  •  

    Posting Permissions

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