Horizontal Multilevel Menu That Expand On Mouse-Over With CSS (Without Javascript)
Commonly the multilevel navigation menu in the websites were powered by JavaScript to show and hide the sub-menu elements when the mouse is over a parent menu. The same effect can be achieved by simple CSS. Now you might think you need to have a CSS 3.0 browser to achieve this. No, not at all, it works with CSS 2.0.
The procedure can be explained in 3 simple steps.
- Style CSS to show an horizontal menu with ‘ul’ and ‘li’ elements.
- Hide the sub-menu with CSS and also define where the 2nd and 3rd level menus appear. In this case the second level menu appears below the parent menu and the 3rd level menu appears to the right of the 2nd level menu.
- Show the sub-level menu when mouse over (:hover) the the parent menu element.
The CSS below is for defining the general styles like the font and the width of the menu container. This creates the horizontal menu with ul elements.
html, body, div, span, ol, ul, li{
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.clear{clear:both;}
#menu { /* the menu container */
background: #000;
width: 325px;
font-size: 13px;
}
#menu ul { /* menu ul style */
list-style: none;
margin: 0;
}
#menu li { /* horizontal menu */
float: left;
position: relative;
}
#menu a { /* the link style of menu */
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
border-right:1px solid #666;
}
This block of CSS is to deal with the sub-menu (nested menu). The CSS defines how the sub-menu and sub sub menu must be shown and positioned.
/* The sub menu is hidden by default and its position is places right under the parent menu*/
#menu ul ul {
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
/* The sub menu list element is given a minimum width */
#menu ul ul li {
min-width: 180px;
}
/* the third level menu (sub sub menu) is placed to the left side of its parent*/
#menu ul ul ul {
left: 100%;
top: 0;
}
#menu ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#menu li:hover > a,
#menu ul ul :hover > a {
background: #333;
color: #fff;
}
#menu ul li:hover > ul {
display: block;
}
The following part defines how and when the sub menu must be hidden and shown. The sub menu is shown when mouse over and hidden when the mouse leaves.
/* When the mouse is over a list (li) element with unordered-list (ul) element inside then show it. The position when its shown is defined in the previous block of CSS*/
#menu ul li:hover > ul {
display: block;
}
/* Styles the anchor (a) tag when mouse over */
#menu li:hover > a,
#menu ul ul :hover > a {
background: #333;
color: #fff;
}
Finally the html part of the menu would be something like this. Its up to you to decide how your menu is going to be structured.
View or Save the Live Demo Here
If you have and questions or suggestions please feel free to comment.
This is just what I was looking for.
NICE EXAMPLE THANX! BIG QUESTION: is it possible to make the dropdown submenus horizontal instead of vertical without causing browser conflict??? THANKS AGAIN, HOPE SOMEONE SHEDS SOME LIGHT ON THIS IVE BEEN GOING BONKERS TRYING TO ACHIEVE THIS!
Yes, this can definitely be done. First remove the float left which makes the menu horizontal.
#menu li { /* vertical menu */
position: relative;
}
then change the position of submenu
#menu ul ul {
display: none;
position: absolute;
top: 0px;
left: 180px; /*must be about the width of the main menu*/
float: left;
width: 180px;
z-index: 99999;
}
I haven’t tried it out, but I guess it works.
Great article!
I applied your style to my menu and it works great. However, I would like to make the outer div span 100% to cover my site page container. I adding overflow:hidden to the top level div but that suppresses the nested div’s. Any suggestions would be greatly appreciated.
Thanks for writing the article.
Hi Michael, to make the outer div span your entire page you must make the #menu width 100%
#menu { /* the menu container */
background: #000;
width: 100%;
font-size: 13px;
}
Further if you want the menu to span the length of the div then you must assign each menu a fixed width that sum up to the width of the containing div.
#menu li { /* horizontal menu */
float: left;
position: relative;
width:150px; /* for example*/
}
Hope this helps
But it doesn’t work in IE.
Hi Ramona, which version of IE? I have tried it in IE8 and IE9. Most likely IE6 will have problem just like it always has.
Yes It is in IE6,in IE8 and IE9 it is automatically solved.
Fantastic menu mate. Well done.