The advantages:
- Using CSS is a lot more accessible than using a JavaScript menu – for example the text can be resized much easier and mostly reflows.
- The CSS code is much smaller than JavaScript and will help with faster page load speeds and web page generation.
- Some users have JavaScript turned off or it has been blocked at their work place presumably for security reasons, so using a CSS menu will work in their browsers.
- It's easier to change the menu style, colors, positions etc, and for different browsers you can maintain style switch sheets easier.
The example code below will render a simple horizontal menu. The example also contains nested lists so that even when generating the source code or adding more lists this will be simple enough to do.
The HTML:
The CSS:
ul {
font-family: Arial;
font-size: 14px;
padding: 0;
margin: 0;
list-style: none;
}
ul li
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
white-space: nowrap;
padding: 5px 15px 5px 15px;
background: #C00;
margin-left: 1px;
}
ul li a:hover {
background: #C00;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #C00;
}
li:hover li a:hover {
background: #F00;
}
Click here to view a live example of the CSS horizontal menu.
You have successfully created a CSS based drop down menu!
