Navigation Bar With On Hover Drop Down

I'm having difficulty in creating this navigation bar on top of my site. I have the following on my html atm. Note that this navigation bar is my 2nd navbar on that page, hence the

Solution 1:

Like mentioned before (position:relative and position: absolute), i've created a css example on jsFiddle

a { color: gray; }
#navbar2li:first-child a { color: black } /* make the letter A black */#navbar2lili:first-child a { color: gray } /* all others gray */#navbar2 {}

/* Level 1 */#navbar2ul { padding: 5px;}
#navbar2li {
    display: inline;
    position: relative; /* set the li-elements to relative, so the child-elements will be positioned on the parent element */white-space: nowrap;
}

/* Level 2 */#navbar2ulul {
    display: none;
    position: absolute;
    top: 15px;
    left: 0
}
#navbar2li:hoverul { display: inline } /* show the second-level nav.. */#navbar2li:hoverulul { display: none } /* but hide the 3rd */#navbar2lili {
    /* show the list, line after line */float:left;
    clear: left;
}

/* Level 3 */#navbar2ululul {
    display: none; /* hide by default */width: 100px;
    background: #eee;
}
#navbar2lili:hoverul {
    display: inline;
    left: 25px;
    z-index: 50;
}

jQuery is a good option, to get it work in IE6, where :hover doesn't work for elements except for the a-tag.

Solution 2:

I wouldn't do this with CSS but use jquery hover option instead. You will need to set your navbar to position: relative and the dropdown menus will need to be absolute. So on your sub ul's i would add a class to them. You will need to style the by category ul to make sure it lines up correctly under the main navigation.

Next I would use jQuery hover to show/hide the by-category ul when you hover. So this will require a unique id or class on the "Browse" or the li wrapping that link.

#navbar2 { position: relative; }
#by-category { position: absolute; }

Solution 3:

This is what I have made-

<style>#navbar2li{ border-radius:5px;list-style-type:none; list-style-position:inside; border:1px solid #bbb; padding:5; background:#383838; width:50}

#navbar2.list:first-child{background:#fc7;} 

#navbar2.list:first-child a{color:#383838}

#navbar2a,#navbar2a:visited{ text-decoration:none; color:#fc7}

#navbar2.list{ float:left; }

#navbar2a:hover{ color:blue }

#navbar2liul{ height:0; width:0; }

#navbar2ulliulli{ position:relative; top:5; width:100; left:-46; }

#navbar2ulliul{ display:none }

#navbar2ulliulli:first-child ulli{ left:65; top:-24; width:50; display:none}
</style><scriptsrc="http://code.jquery.com/jquery-latest.js"type="text/javascript"></script><script>
$(document).ready(function(){ 
  $("#navbar2 ul li:eq(4)").mouseenter(function(){ 
    $("#navbar2 ul li ul").fadeIn(600);
  });
  $("#navbar2 ul li:eq(4)").mouseleave(function(){ 
    $("#navbar2 ul li ul").fadeOut(600); 
  }); 
  $("#navbar2 ul li ul li:first").mouseenter(function(){
    $("#navbar2 ul li ul li:first-child ul li").fadeIn(600); 
  });
  $("#navbar2 ul li ul li:first").mouseleave(function(){
    $("#navbar2 ul li ul li:first-child ul li").fadeOut(600);
  });
}); 
</script>

Now put it on your webpage. You may edit some of the css according to your requirements.