How to create a CSS3 dropdown menu
There is no real difference in creating a CSS3 dropdown menu when comparing CSS3 with CSS2.1. It all starts by creating a basic HTML structure which contains a so-called unordered list. The menu item which will make use of the dropdown menu will have to contain a new unordered list which will function as dropdown. Besides, this specific menu item needs a class so it can be called up separately by the CSS. In the example the menu item has been given a class named ‘drop’.
Next, by means of the CSS the dropdown menu is given a display: none; ensuring the dropdown menu will not be displayed. Directly apply a list-style: none to the unordered list to ensure the different menu items have no bullet style and also apply a float:left; to the list items allowing them to be displayed side by side from the left to the right. At least as important is to provide the li elements with a position: relative;. At a later stage the position: relative; will clearly determine the exact location of the dropdown.
Next, apply some standard styling on the list items to maintain a proper overview. In the example we have maintained the overview by adding a 30px padding at both sides of the list items.
It’s time to hide the dropdown standard. To hide this standard you should call up the unordered list from the dropdown by means of ul ul and by applying display: none;. To make sure the dropdown is correctly displayed beneath the list item at a later stage, the padding needs to be set on O.
Call up the list items from the dropdown by means of ul ul li and apply a padding: 0; to these elements to ensure they are displayed at the correct location. A float: none; also needs to be added to ensure the dropdown list items are properly displayed on top of each other.
Last but not least we need to make sure the dropdown menu is displayed when a user hovers over the menu. This functionality can be realized by calling up the list item of the menu by means of the class we have applied before (in this case .drop). To indicate what needs to happen when a user hovers over the list item specified by the ‘drop’ class make use of :hover followed by ‘ul’ to indicate the dropdown ‘ul’ needs to have a style. Next add a display: block; and a position: absolute;. Display: block makes sure the dropdown unordered list is displayed and the position: absolute; makes sure the dropdown is displayed beneath the proper list item.
At this stage the dropdown menu is fully-functional and the actual styling can be continued.
<html>
<head>
<style>
ul{
list-style: none;
}
ul li{
float: left;
padding: 0 30px;
position: relative;
}
ul ul{
display: none;
padding: 0;
}
ul ul li{
padding: 0;
float: none;
}
.drop:hover ul{
display: block;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Page 1</a></li>
<li class="drop"><a href="#">Page 2</a>
<ul>
<li><a href="#">Page 2.1</a></li>
<li><a href="#">Page 2.2</a></li>
<li><a href="#">Page 2.3</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</body>
</html>