A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu.
The HTML
The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.
These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.
<ul id="menu"> <li><a href="#">About Us</a> <ul> <li><a href="#">The Team</a></li> <li><a href="#">History</a></li> <li><a href="#">Vision</a></li> </ul> </li> </ul>
The CSS
<style>
li ul {
display: none;
}
li:hover ul {
display: block;
}</style>Your required minimal form of dropdown menu can be found bellow for download.
- Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.
- In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.
- The drop down menu is fast, simple and effective
- A drop down menu could never be so simple to design and using CSS alone.
- The menu is designed purely using CSS and avoids any jQuery or Javascript library which makes it much more faster and simple.