Search code examples
htmlcssmenubar

Horizontal double-level CSS menu (jsfiddle included)

I'm trying to make a double-tier menu and found this useful code made by Stu Nicholls. However, he used images to make the tabs show up:

http://www.cssplay.co.uk/menus/dropline-current-override.html

but I don't want to use images, as using images is a little restrictive in terms of what you can do with the colours. I've put the code into jsfiddle:

http://jsfiddle.net/ak3vV/

I want it to behave exactly like this, with the current selection highlighted:

http://jsfiddle.net/AvoSonic/QBBkS/1/

EDIT: Item2 is currently selected, so it is highlighted with some colour and when you hover over the others (item1, item3, etc), they are highlighted with a different colour End edit

I've been fiddling around with it but can't seem to get it quite right.. something's always being highlighted when it shouldn't be and others are not highlighted when they are supposed to be..

See below: I don't want to use tab.gif

 #droplineMenu ul ul li a:hover {background:url(tab.gif) right top; line-height:60px; }
 #droplineMenu ul ul li a:hover b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

 #droplineMenu ul ul li:hover > a {background:url(tab.gif) right top; line-height:60px; }
 #droplineMenu ul ul li:hover > a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

 #droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
 #droplineMenu ul ul li.current a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

Note that I'm new to css, so this is quite a large example for a menubar and a bit confusing..

Solution

  • I have updated you css like below.

    #photo {display:block; margin:0 auto;}

#droplineMenu {height:66px; position:relative; background-color:#b0c4de; text-align:center; width:960px; margin:0 auto; z-index:100; }
#droplineMenu ul {padding:0; margin:0; list-style:none; }
#droplineMenu table {border-collapse:collapse; width:0; height:0; margin-top:-1px; margin-bottom:-1px; }
#droplineMenu ul ul li {float:left; }
#droplineMenu ul ul li a {display:block; float:left; }
#droplineMenu ul ul div {position:absolute; left:-9999px; overflow:hidden; }

#droplineMenu ul#menuOuter {display:inline-block; } 
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; height:66px; }

#droplineMenu ul ul li a {height:66px; line-height:66px; padding:0 20px 0 0; font-size:14px; font-family: tahoma, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase; }
#droplineMenu ul ul li a b {display:block; height:66px; float:left; padding:0 0 0 20px; font-weight:normal; cursor:pointer; }
#droplineMenu ul ul li a:hover {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li a:hover b {color:#fc0; background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li div{background-color:#00ffff;}
#droplineMenu ul ul li:hover > a {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li:hover > a b {color:#fc0; background-color:#00ffff; line-height:60px; }

#droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li.current a b {color:#fc0; background:url(tab.gif) left top; line-height:60px; }

#droplineMenu ul ul li.current div {left:0; top:66px; width:960px; text-align:center;} /*change this for currently selected */

#droplineMenu ul ul :hover div {left:0; top:66px; width:960px; text-align:center; height:40px;}
#droplineMenu ul ul li.current div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}
#droplineMenu ul ul li div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}

#droplineMenu ul ul li div ul {display:inline-block; } /*Change this for submenu*/
#droplineMenu ul ul li div ul li {display:inline-block; display:inline;}

#droplineMenu ul ul div a {background-image:none; height:40px; line-height:40px; font-size:12px; padding:0 20px;}
#droplineMenu ul ul div a:hover {background-image:none; color:#fc0; line-height:40px;}

#droplineMenu ul#menuOuter li.lv1-li a:hover {direction:ltr;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div {left:-9999px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div {left:-9999px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover div {background-color:#ff00ff;left:0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div {left:0;background-color:#ff00ff;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a {background-color:#ff00ff; color:#fff; line-height:66px;} 
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current a b {background-color:#ff00ff; color:#fff; line-height:66px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a {background-color:#ff00ff; color:#fff; line-height:66px;} 
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a b {background-color:#ff00ff; color:#fff; line-height:66px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a {background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover a b {color:#fc0;background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover {background-color:#ff00ff; line-height:60px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover b {color:#fc0;background-color:#ff00ff; line-height:60px;}

#droplineMenu ul ul li.current div ul li a {background-image:none; color:#fff; line-height:40px; }
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current:hover ul li a {background-image:none; line-height:40px;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover ul li a {background-image:none; line-height:40px;}

#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li:hover ul li.current div ul li a:hover {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li.current_sub a {color:#fc0;}
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current div ul li a:hover {color:#fc0;}

#droplineMenu ul ul li.current div ul li.current_sub a {background-image:none; color:#fc0; line-height:40px;}
#droplineMenu ul ul li.current div ul li.current_sub a:hover {background-image:none; line-height:40px;}
#droplineMenu ul ul li a:hover div b,
#droplineMenu ul#menuOuter li.lv1-li a:hover ul li.current a:hover div b {display:block; width:960px; height:40px; position:absolute; left:0; top:0; background:#006789; z-index:-1; filter: alpha(opacity=60); opacity:0.6; padding:0; line-height:40px;}

    Check the below Jsfiddle for your reference

    http://jsfiddle.net/w4QW2/