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 - Building the drop-down menu's structural markup (Page 2 of 4 )
A good point to begin developing this CSS-based drop-down menu is with defining its structural markup, which will be used to display on the browser the top-level item of the menu and the corresponding sub-items. To do so, I'm going to use as a starting point the excellent implementation of Peter Took's drop-down menu, and later I will introduce my own modifications to the whole navigational system.
Thus, having clarified that, the (X)HTML markup that will compose the menu will look similar to that shown in the below example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Not too difficult to grasp, right? As you can see, the bare bones structure of this CSS-based menu is comprised of a well-structured unordered list, where each of the respective sub-menus is also wrapped by another list. Definitely, at this point you'll have to agree with me that the structural markup of the prior menu looks clean and tight, and offers remarkable accessibility.
So, having defined the basic structural markup of the menu that you saw earlier, what's the next step? Well, as you might have guessed, the menu is still at a very primitive stage; it requires the definition of some important CSS styles, which will make it work as expected.
Therefore, and assuming that you're still interested in learning how the previous menu can be turned into a fully-functional piece of code, in the course of the following section I'm going to declare a few simple CSS styles to spice up the visual appearance of the menu itself, and more importantly, to make it work adequately.
To find out more on how all of these tasks will be performed, please jump ahead and read the next few lines. I'll be there, waiting for you.
Style Sheets 
/ 7 
CSS Combinators: Working with Child Combinators
