Improving the Visual Presentation of a CSS Drop-Down Menu
Welcome to the final installment of the series “Building clean drop-down menus with CSS.” This series shows you how to build an extensible drop-down menu which you can easily include in the existing structure of your own web site. In this part, we'll work on the menu we've created to make it more visually appealing.
Improving the Visual Presentation of a CSS Drop-Down Menu - A review: the menu’s complete source code (Page 2 of 4 )
Actually, before I proceed to show you how to change the initial group of CSS styles that belongs to this menu to make it slightly more appealing, I’d like to list its full source code. This will help you recall more quickly how it looked previously.
So, that being said, here’s the complete definition of this drop-down menu, before we modify its visual appearance:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you can see, the above code sample demonstrates in a nutshell that it’s possible to build this kind of menu by writing clean, accessible (X)HTML markup, in conjunction with some basic CSS styles. Pretty good, right?
Now that the definition of the previous menu is fresh in your mind, it’s time to jump forward and learn how to make it look slightly more compelling.
Want to see how this will be achieved? Click on the link below and keep reading, please.