A CSS drop down menu is always on the wish list of any CSS developer. Building such a menu is relatively simple. All you need to know are CSS selectors, floating and contextual positioning. This tutorial will explain you how to build a CSS drop down menu in the easiest way I can imagine, that is, by following a step-by-step approach. Let's get started!
Step 1: The markup
We'll use unordered lists to mark up both our main menu and its child sub-menu, which will be contained in a list item with class sub
:
<ul id="navigation"> <li><a href="#">Home</a></li> <li class="sub"> <a href="#">About</a> <ul> <li><a href="#">Us</a></li> <li><a href="#">Our Work</a></li> <li><a href="#">Projects</a></li> </ul> </li> <li> <a href="#">Contacts</a> </li> </ul>
When a user hovers the item with class sub
. our sub-menu will be shown.
Step 2: Styling the main menu
We need to style the main menu first. Also, we need to make sure that only the list items which are directly children of the main menu will be affected. In other words, we don't want to select our sub-menu and its items. For that reason, we'll use the child selector (>
):
#navigation { margin: 0; padding: 0 1em; background: #000; height: 3em; list-style: none; } #navigation > li { float: left; height: 100%; margin-right: 0.5em; padding: 0 1em; } #navigation > li > a { float: left; height: 100%; color: #c60; text-decoration: none; line-height: 3; font-weight: bold; text-transform: uppercase; } #navigation > li > a:hover { color: orange; text-decoration: underline; }
We set an height on the main menu and its items both to contain floats and to avoid any possible problem in Internet Explorer 7. For that reason, even the links have a stated dimension.
Step 3: Creating a contextual positioning
Now we want our sub-menu to always appear under the list item it belongs to. For that reason, we create a contextual positioning on that item:
#navigation > li.sub { position: relative; }
Step 4: Styling the sub-menu
To hide our sub-menu, we'll use negative absolute positioning. We cannot use display: none
due to accessibility reasons.
#navigation > li.sub ul { width: 10em; margin: 0; padding: 0.5em 0; list-style: none; background: #a40; position: absolute; top: -1000em; } #navigation > li.sub ul li { width: 90%; margin: 0 auto 0.3em auto; } #navigation > li.sub ul li a { height: 100%; display: block; padding: 0.4em; color: #fff; font-weight: bold; text-decoration: none; } #navigation > li.sub ul li a:hover { background: #c60; text-decoration: underline; }
top: -1000em
hides our sub-menu from the view without affecting its display role.
Step 5: Showing the sub-menu
To show our sub-menu, we have only to adjust its top
property using the height of the list item as its value. In this case, such height is inherited from the main menu and is actually 3em:
#navigation > li.sub:hover ul { top: 3em; }
How do I add a drop down menu to an item in my store? For instance, I am selling t-shirts and I need to have a drop down menu listing the available sizes. Then I need them to be able to click on the size and add it to the shopping cart.
Very nice tutorial!
One question: How do I get some of the elements to float right?