Over the course of this instructive three-article series I'm going to walk you through the process of creating an extensible CSS-based drop-down menu that can be easily adapted to work seamlessly with many modern browsers. In addition, the menu in question will offer a high level of customization, so it can be quickly modified to fit your personal requirements.
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.
Style Sheets 
/ 7 
CSS Combinators: Working with Child Combinators
