Finishing a Drop-Down Menu with the Hover CSS Pseudoclass

In reality, adding a couple of additional sections to the previous drop-down menu is a very simple task. It only requires modifying the structural markup. Fortunately, in this case it's not necessary to introduce any modifications to the CSS code to make the extra sections to work properly.

With that said, please take a look at the following code fragment. It constructs these brand new website sections, labeled “Services” and “Contact” respectively. Here they are:

<ul id="navbar">

<li><a href="#">Home</a>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

<li><a href="#">Menu item 4</a></li>

<li><a href="#">Menu item 5</a></li>

</ul>

</li>

<li><a href="#">About Us</a>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

<li><a href="#">Menu item 4</a></li>

<li><a href="#">Menu item 5</a></li>

</ul>

</li>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

<li><a href="#">Menu item 4</a></li>

<li><a href="#">Menu item 5</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

<li><a href="#">Menu item 4</a></li>

<li><a href="#">Menu item 5</a></li>

</ul>

</li>

<li><a href="#">Contact</a>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

<li><a href="#">Menu item 4</a></li>

<li><a href="#">Menu item 5</a></li>

</ul>

</li>

</ul>

Done. Now, the menu looks much more functional, since a couple of extra sections has been added to it with just a few pieces of clean markup. Nonetheless, the best part of this enhancement process is that the additional sections don’t require modifying the previous CSS styles to function as expected. Isn’t that great? You bet it is!

Seeing is believing, so in the last segment I’ll show you the entire source code corresponding to the sample drop-down menu, this time including the sections we just added. In this way, you’ll be able to test it and customize it to suit your personal preferences.

Now read the section next section. We’re almost finished building this CSS-based menu!