A simple code snippet building a basic CSS flyout menu. This code tutorial explains the CSS elements of the menu, along side with a basic HTML sample. The present CSS code is compatible with all modern browsers including Internet Explorer, Firefox, Opera, Saferi and Chrome.
The code below shows 2 parts, where the upper one within the HTML header is the style component and integrated with the actual HTML page. A div identifier HTML tag drives the menu part of the page. In this implementation a drop-down horizontal menu is the target, utilizing a list of links via the DIV > UL > LI > A sequence is used to display the various anchors of the menu.
The width of the menu is specified within the UL tag. It also filters out the padding and margins as well as the list type. Each li element has a hard-coded value of 200px for this sample. Two separate levels of list elements are implemented with LI UL LI and UL LI UL tag sequences. The later is responsible for showing the selected menu items.
The anchor elements are set with the block property in order to cover the full width allocated by each list item. The regular and hover methods of the A tag are handled by this sample to highlight a link selection.
Visibility control is established via the UL LI:HOVER UL entry while the regular entry is hidden from view. At the same time this entry is preset to offset the popup menu element to the bottom of the main menu bar.
Code instructions to test and experiment with this menu system:
- Copy the code below into a new document with a .html extension and save it
- Use your browser to open and load the document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test form</title>
<style type="text/css">
#menu {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#menu ul {
padding: 0px;
margin: 0px;
width: 800px;
list-style-type: none;
}
#menu ul li {
position: relative;
width: 200px;
}
#menu li {
float: left;
width: 100%;
background: #990;
border-top: #555 1px solid;
}
#menu li ul li {
float: none;
}
#menu a {
color: #EFEFEF;
width: 200px;
text-indent: 4px;
line-height: 25px;
display: block;
text-decoration: none;
}
#menu a:hover {
color: #FFFFFF;
background: #FF0000;
}
#menu ul li ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
}
#menu ul li:hover ul {
visibility: visible;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#Bar1">Bar1</a>
<ul>
<li><a href="#Sub1">Sub1</a></li>
<li><a href="#Sub2">Sub2</a></li>
</ul>
</li>
<li><a href="#Bar2">Bar2</a>
<ul>
<li><a href="#Sub3">Sub3</a></li>
<li><a href="#Sub4">Sub4</a></li>
</ul>
</li>
<li><a href="#Bar4">Bar3</a></li>
</ul>
</div>
</body>
</html>
Modifications to maintain the highlight of the parent element are possible using an LI:HOVER A entry where the text color for the parent tag can be set.
The sample does not work on IE6 as additional CSS code is needed to operate exclusively with the A:HOVER HTML property as IE6 will not react to an LI:HOVER.
For simplicity and testing purposes the CSS and HTML parts are mixed in the same page. For production you should always separate the CSS part of the code placing it into a different file. |
