Building Clean Drop-Down Menus with CSS - Adding some useful CSS styles to make the menu work
(Page 3 of 4 )
According to the concepts deployed in the previous section, you'll realize that the current incarnation of this navigational menu is completely useless. However, this condition is about to change, since I plan to aggregate some simple CSS styles into it, which hopefully will make the menu work at least partially (more about this in a moment).
Below I included the respective declarations of the aforementioned CSS styles, which, as I explained earlier, are responsible for displaying the drop-down menus when the mouse is positioned over a determined top-level item:
/* reset body styles */
body{
padding: 0;
margin: 0;
background: #fff;
}
/* style unordered list */
ul{
padding: 0;
margin: 0;
list-style: none;
}
/* style menu items */
li{
float: left;
position: relative;
width: 10em;
}
/* position and hide drop-down menu */
li ul{
display: none;
position: absolute;
top: 1em;
left: 0;
}
li > ul{
top: auto;
left: auto;
}
/* display drop-down menu */
li:hover ul{
display: block;
}
As you can see, the above CSS declarations are indeed very easy to follow, since their primary goal is first to style the list that comprises the top-level elements of the menu in question, and second to hide/show the respective menu items when a user places the mouse over one of these elements.
The magic happens due to the following CSS declaration:
/* display drop-down menu */
li:hover ul{
display: block;
}
Since most of standard-compatible browsers allow you to assign "hover" pseudo class to any web page element, it's pretty easy to display the respective menu items by using this neat feature. Unfortunately, IE doesn't support this, but in further articles of the series I'll be fixing this issue, so don't worry about it for the moment.
So far, so good. At this stage I have created all of the CSS styles required to make the drop-down menu work as expected. However, all of the pieces look rather dis-articulated when analyzed separately, so in the next section I'm going to join them together. This will give you the complete source of this CSS-based drop-down menu.
Click on the link that appears below and keep reading.
Next: Seeing the completed drop-down menu in action >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
