I am going to show you how to create a barebones CSS flyout menu. If you are looking for templates, check out our CSS Flyout Menus page. The following code is not meant to be a finished product for your website. Instead, I am simply trying to provide a robust starting point for designers to expand upon. The goal here is to create a structured yet flexible flyout menu that can be used in any design.

Demo

The HTML

The first thing we need to build our flyout menu is the HTML structure. I've decided to use a pretty basic nested UL list. I've included a containing DIV an in order to provide maximum flexibility for your custom styles. I've also include a SPAN tag inside each link for the same reason.


CSS Resets

Now that we have the basic HTML structure for our menu we need to start applying the CSS. Before we get to deep into it is always a good idea to apply some basic CSS resets. Things like padding, margin, and border can cause interference down the road so it is always a good idea to reset these properties to 0 at the beginning of your styles.


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

CSS Basic Structure

For the basic CSS structure there are a couple basic concepts to keep in mind for flyout menus. If you understand these concepts, expanding and customizing your menu should be a breeze.

z-index

The first is the z-index property. A higher z-index means that HTML element will show up on top of one with a lower z-index. I set the first UL to a z-index of 397. This should ensure that our menu is displayed over the top of all other elements on the page. For each successive level of the menu I increment the z-index by 1 so that the flyout menus will show up on top of the parent element.

Position

The second concept to grasp here is position: relative vs. position: absolute. Normally if you apply a position: absolute to a element it will be absolutely positioned with respect to the browser window. What we want to do is absolutely position the sub menu with respect to the parent LI element. In order to get this behavior we apply a position: relative to the parent LI and then apply a position: absolute to the child UL. This technique not only works well for flyout menus but all other HTML elements as well.

Visibility

The final concept to grasp for our CSS flyout menu is the visibility: hidden vs. visibility: visible. The effects of each should be pretty obvious but in order to get our flyout menu to appear when we need to use them in a specific way. We start off with setting all the sub menu's UL elements to visibility: hidden. In order to unhide the submenu we add visibility: visible to the li:hover > ul element. This in effect shows us the submenu when hovering over the parent LI element.

#cssmenu ul {
position: relative;
z-index: 397;
}
#cssmenu ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li:hover {
position: relative;
z-index: 399;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden; /* hide sub menus by default */
position: absolute;
top: 100%;
left: 0;
z-index: 398;
width: 100%;
}
#cssmenu ul ul ul {
top: 0px;
left: 99%;
}
#cssmenu ul li:hover > ul {
visibility: visible; /* show sub menu */
}
#cssmenu ul ul {
top: 0px;
left: 99%;
}

CSS Custom Styles

These are some of the custom styles I used for this menu in order to get some basic functionality. Here is where you should be setting the size, colors, and shape of your CSS flyout menu.


#cssmenu ul {
width: 200px; /* main menu width */
background: #efefef;
}
#cssmenu ul ul {
width: 150px; /* sub menu width */
}
#cssmenu ul li {
padding: 7px 10px;
color: #000;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
background: #ccc;
}
#cssmenu ul a:link,
#cssmenu ul a:visited {
color: #000;
text-decoration: none;
}
#cssmenu ul a:hover {
color: #000;
}
#cssmenu ul a:active {
color: #ffa500;
}

All CSS Styles

Here is all the CSS I used for this menu in one big chunk for your convenience.


/* Base CSS */
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {list-style: none; margin: 0; padding: 0; border: 0;}
#cssmenu ul {position: relative; z-index: 397;}
#cssmenu ul li {min-height: 1px; line-height: 1em; vertical-align: middle;}
#cssmenu ul li:hover {position: relative; z-index: 399; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 398; width: 100%;}
#cssmenu ul ul ul {top: 0px; left: 99%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {top: 0px; left: 99%;}

/* Custom CSS Styles */
#cssmenu ul {width: 200px; background: #efefef;}
#cssmenu ul ul {width: 150px; }
#cssmenu ul li {padding: 7px 10px; color: #000;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {background: #ccc; color: #fff;}
#cssmenu ul a:link,
#cssmenu ul a:visited {color: #000; text-decoration: none;}
#cssmenu ul a:hover {color: #000;}
#cssmenu ul a:active {color: #ffa500;}