Full CSS Horizontal Drop Down Menu
Who can resist the temptation of the ever lovely CSS? I was wondering around the web looking for a nice CSS-only dropdown menu. First of all this is not new, who would forget the Suckerfish Dropdown posted at A List Apart it was the best of its time. but anyway… I so happen to stumble upon another article from http://www.cssplay.co.uk/ with this article, there are several reasons why I needed a CSS like this; one is I am avoiding to use another JavaScript for dropdown and second is, I need multiple instances of the menu; so JavaScript… not good. I am sharing the CSS, so here it is… “kudos” to the author ^_^:
The CSS
#info {background:#f8f8f8; border:0;}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:26px;
position:relative;
z-index:100;
font-family:arial, sans-serif;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:149px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:149px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#000;
width:138px;
height:26px;
background:#EEE;
padding-left:10px;
line-height:29px;
font-weight:bold;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:149px;
w\idth:138px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#EEE url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#666 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
color: #FFF;
}
.menu ul ul :hover > a.drop {
background:#666 url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;
color: #FFF;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#EEE;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#666; color:#FFF}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul,
.menu ul ul ul /*added for additional 4th level*/
{visibility:hidden;position:absolute;height:0;top:26px;left:0; width:149px;border-top:1px solid #EEE}
/* another hack for IE5.5 */
* html .menu ul ul {top:26px;t\op:27px;}
/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}
/*added for positioning the 4th flyout menu*/
.menu ul ul ul ul{left:149px; top:-1px; width:149px;}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#EEE; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#FFF; background:#666;}
.menu :hover > a, .menu ul ul :hover > a {color:#FFF; background:#666;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}
/*added to keep the fourth level hidden while hovering the 3rd level*/
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/*added to make the fourth level visible while hovering the 3rd level*/
.menu ul :hover ul :hover ul :hover ul{ visibility:visible;}
I left the original author’s comments because it explains everything, and some liks to his original image i.e the arrow for the dropdown; removed some unnecessary styles for IE5 which I think nobody needs it anyway.
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A css only dropdown menu</title> <link rel="stylesheet" type="text/css" href="menu.css" /> </head> <body> <div class="menu"> <ul> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Menu with dropdown</a> <ul> <li><a href="javascript:;">Item Number 1</a></li> <li><a class="drop" href="javascript:;">Menu Sub Items</a> <ul> <li><a href="javascript:;">Sub Item 1</a></li> <li><a href="javascript:;">Sub Item 2</a></li> <li><a class="drop" href="javascript:;">Sub Item 3</a> <ul> <li><a href="javascript:;">Sub Item 4</a></li> <li><a href="javascript:;">Sub Item 5</a></li> <li><a href="javascript:;">Sub Item 6</a></li> </ul> </li> </ul> </li> <li><a href="javascript:;">Another Item</a></li> </ul> </li> <li><a href="javascript:;">More Menu</a> <ul> <li><a href="javascript:;">Sub Item 1</a></li> <li><a href="javascript:;">Sub Item 2</a></li> <li><a href="javascript:;">Sub Item 3</a></li> </ul> </li> <li><a href="javascript:;">End Menu</a> <ul> <li><a href="javascript:;">Item Number 1</a></li> <li><a class="drop" href="javascript:;">Menu Sub Items</a> <ul class="left"> <li><a href="javascript:;">Sub Item 1</a></li> <li><a href="javascript:;">Sub Item 2</a></li> <li><a class="drop" href="javascript:;">Sub Item 3</a> <ul class="left"> <li><a href="javascript:;">Sub Item 1</a></li> <li><a href="javascript:;">Sub Item 2</a></li> <li><a href="javascript:;">Sub Item 3</a></li> </ul> </li> </ul> </li> <li><a href="javascript:;">Another Item</a></li> </ul> </li> have </ul> </div> </body> </html>
The Doctype portion of the HTML should be defined for the CSS to properly work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can also view the working sample here. I know this is really old-school but still ideal alternative for a JavaScript menu.
I have updated the Style Sheet to have 4 levels of menu, see the working sample here. ^_^
12 comments
Leave a Reply
Referrals
Subscribe
Lifehacker
- Try Out Firefox's New JaegerMonkey JavaScript Engine in Nightly Builds [Downloads] September 10, 2010 Kevin Purdy
- Use Google Voice Actions with Any Web Service that Supports SMS or Email [Android Tip] September 10, 2010 Whitson Gordon
- Best Fax Service? [Hive Five Call For Contenders] September 9, 2010 Jason Fitzpatrick
Gizmodo
- Learn How to Shoot the Sky Like the Astronomy Photographer of the Year Winners [Photography] September 10, 2010 Kat Hannaford
- Why Ride a Bike When You Can Ride a Horse (Bike) [Bikes] September 10, 2010 Kyle VanHemert
- How to Catch a Terrorist: Read His Brainwaves [Security] September 10, 2010 Spencer Ackerman
I’ve been trying to use your dropdown menu to work with an extra sub level and cannot seem to make it work. I works fine the way you have displayed it, however I need one more sub level for what I’m trying to do. Was wondering if you could have a look at the website url above and tell me what I a missing or is there a forum you have where I can post.
hi paul,
i think all you have to do is create another css for the third level and so on, for example:
.menu ul ul a{…} <– this will style the 2nd level
.menu ul ul ul a{…} <– this will style the 3rd level and the likes, just play with it… ^_^
Thanks for your reply. That is what I did but it doesn’t seem to work for me. I get all the levels but the fourth level is visible before you hover over the third level list. I know it must be something simple as I followed your original lead and added the extra
.menu ul ul ul ul{
left:100px;
top:-1px;
width:100px;
}
and also added the extra
.menu ul ul ul ul.left { left:-100px }
and an extra
.menu ul :hover ul ul ul{ visibility:hidden }
and extra
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }
If you have firefox you can view the css code and source here http://www.freehostbc.com/temp/index3.html
Thank you very much for helping me with this.
try modifying this line:
.menu ul ul {
visibility:hidden;
…
into
//4th and 5th
.menu ul ul, .menu ul ul ul, .menu ul ul ul ul {
visibility:hidden;
…
and
4th
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }
5th
.menu ul :hover ul :hover ul :hover ul :hover ul{ visibility:visible }
try that perhaps
Thanks again for your reply. I tried what you suggested but it is still the same. Hope you don’t mind appending my css code here for you to look at.
/* horizontal dropdown menu */
.menu {
height:26px;
position:relative;
z-index:100;
font-family:Verdana;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:149px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:100px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#1a2732;
width:89px;
height:26px;
background:#FFF;
padding-left:10px;
line-height:29px;
font-weight:bold;
border-color:#AAAAAA;
border-width:1px;
border-style:solid;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:100px;
w\idth:88px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/grey-arrow.gif) no-repeat 100px center;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/blue-arrow.gif) no-repeat 100px center;
color: #FFF;
}
.menu ul ul :hover > a.drop {
background:#1a2732 url(http://www.freehostbc.com/fnfsportsfishing/images/blue-arrow.gif) no-repeat 100px center;
color: #FFF;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#FFF }
/* style the third level hover */
.menu ul ul ul a:hover {background:#1a2732; color:#FFF }
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#FFF }
/* style the fourth level hover */
.menu ul ul ul ul a:hover {background:#1a2732; color:#FFF }
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul,.menu ul ul ul,.menu ul ul ul ul{
visibility:hidden;
position:absolute;
height:0;
top:26px;
left:0;
width:100px;
border-top:1px solid #AAAAAA;
}
* html .menu ul ul { top:26px }
/* position the third level flyout menu */
.menu ul ul ul{
left:100px;
top:-1px;
width:100px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left { left:-100px }
/* position the fourth level flyout menu */
.menu ul ul ul ul{
left:100px;
top:-1px;
width:100px;
}
/* position the fourth level flyout menu */
.menu ul ul ul ul.left { left:-100px }
/* style the table so that it takes no part in the layout – required for IE to work */
.menu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#FFFFFF;
color:#1a2732;
height:auto;
line-height:1em;
padding:5px 10px;
width:79px;
border-width:0 1px 1px 1px;
}
* html .menu ul ul a, * html .menu ul ul a:visited { width:101px }
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#FFF;
background:#1a2732;
}
.menu :hover > a, .menu ul ul :hover > a { color:#FFF; background:#1a2732; }
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{ visibility:visible }
/* keep the third level hidden when you hover on second level list OR link */
.menu ul :hover ul ul{ visibility:hidden }
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible }
/* keep the fourth level hidden when you hover on the second level list OR link */
.menu ul :hover ul ul ul{ visibility:hidden }
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul{ visibility:visible }
/* keep the fifth level hidden when you hover on the third level list OR link */
.menu ul :hover ul ul ul ul{visibility:hidden }
/* make the fifth level visible when you hover over fourth level list OR link */
.menu ul :hover ul :hover ul :hover ul :hover ul{ visibility:visible }
/* end horizontal dropdown menu */
hi paul,
I will try to modify your CSS, however I cannot do it now, I’m in the middle of something, I will update my POST to 4 level menu.
Hey I very much appeciate that. I am still trying to figure it out and changed my doc reference to html 401 transitional to see if that would make a difference. I’ve also double checked my html to make sure the nested lists are correct. I have to assume it is in the css somewhere or a hack that I know nothing about for IE or Firefox. I’ve looked at a couple of others that use javascript. I really don’t want to use it though if I can avoid it.
hi paul; i’ve updated my post, please check… i hope it does the trick…
You’re awesome!! I really appreciate what you’ve done! I had to make the doctype as follows to make it validate, will that make a difference in older browsers?
It seems to work just fine in the newest versions that I tried.
Also if I wanted to center the menu under the header how would I do this? I tried a few things with no luck. See the link for how it looks now.
http://www.freehostbc.com/temp/index3.html
Again thanks for doing this for me I’ve spent a lot of time trying to figure it out.
For what ever reason the doctype didn’t show up after I pasted the code. I had to change it to transitional instead of strict. See source code.
Got everything figured out that I mentioned above and the dropdown menu works fine in every browser I checked it in except for IE 6. Too bad, I liked it alot.
interesting, it works on FF, IE, Opera, Chrome and Safari