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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul>
<li>About Us
<ul>
<li><a href="">Our Staff</a></li>
<li><a href="">Why work with us?</a></li>
<li><a href="">Our profile</a></li>
<li><a href="">More details</a></li>
</ul>
</li>
<li>Services
<ul>
<li><a href="">Graphic Design</a></li>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
<li><a href="">Software Development</a></li>
</ul>
</li>
<li>Products
<ul>
<li><a href="">Simple AJAX Library</a></li>
<li><a href="">PHP Form Validator</a></li>
<li><a href="">PHP MySQL Connector</a></li>
<li><a href="">PHP Easy Pager</a></li>
<li><a href="">PHP Form Factory</a></li>
</ul>
</li>
</ul>
</body>
</html>
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.
Next: Adding some useful CSS styles to make the menu work >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
