Improving the Visual Presentation of a CSS Drop-Down Menu

Over the course of the previous section, I pointed out that this drop-down menu needs a better visual presentation, since in its current incarnation it is rather primitive. Therefore, I will introduce some basic changes to the menu's original CSS styles to make it look more appealing and potentially, more professional.

Of course, the modifications that I’m about to introduce to the menu’s CSS styles are mere examples, and consequently, they should be taken as such. If you want to give the menu another visual appearance, the process is only limited to defining the styles that best suit your personal needs.

Given that, please examine the following list of CSS declarations, which are aimed at improving the look and feel of this menu:

/* 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.topitem{

float: left;

position: relative;

width: 15em;

padding: 5px;

background: #fc0;

font: bold 11px Tahoma, Arial, Helvetica, sans-serif;

color: #000;

}

/* position and hide drop-down menu */

li.topitem ul{

display: none;

position: absolute;

top: 22px;

left: 0;

background: #ffc;

padding: 5px;

}

li > ul{

top: auto;

left: auto;

}

/* display drop-down menu (add an 'over' class attribute to list items for IE */

li:hover ul,li.over ul{

display: block;

}

#navbar li li a {

font: normal 11px Verdana, Arial, Helvetica, sans-serif;

color: #000;

padding: 5px;

text-decoration: none;

}

#navbar li li a:hover {

color: #00f;

}

As you can see, the CSS styles shown above demonstrate how easy it is to provide this drop-down menu with a slightly better visual presentation. Basically, all I did was assign a basic background color to each top-level element of the menu, and add some styling its corresponding items.

Of course, if you’re anything like me, you want to see for yourself how this improved version of the menu looks. Below I included some screen shots that show clearly the menu’s new visual appearance:

Hopefully, the three previous images should give you a good idea of how simple it is to change the visual presentation of this drop-down menu by introducing only basic changes to the corresponding CSS styles. The main advantage of working with this kind of web-based user interface rests on its clean and robust (X)HTML structure.

Now that you have learned how to improve the look and feel of this menu to make it appear slightly more attractive to potential users, it’s time to see its full source code, this time including the modifications that you saw previously.

As you might guess, this task will be performed in the next section, so click on the link below and keep reading.