Creating an Advanced Navigation Bar with CSS

This helpful two-part CSS video tutorial will show you how to create a rather advanced navigation bar, complete with highlighted drop-down menu options, that scrolls with the page, entirely with CSS.

It is actually a lot easier than you may first think. You first need to create a class for the navigation bar, and then build up the list of main menu options inside of it. Now inside each of the main menu options, you will add the sub menu options. So your initial code will look something like this.

<div class='mainNavigationMenu'>
    <ul>
        <li>
            <a>Home</a>
                <ul>
                    <li><a href='link here'>Link Item 1</a></li>
                    <li><a href='link here'>Link Item 1</a></li>
                    <li><a href='link here'>Link Item 1</a></li>
                </ul>
        </li>
        <li>
            <a>Account</a>
                <ul>
                    <li><a href='link here'>Link Item 2</a></li>
                    <li><a href='link here'>Link Item 2</a></li>
                    <li><a href='link here'>Link Item 2</a></li>
                </ul>
        </li>
        <li>
            <a>Settings</a>
                <ul>
                    <li><a href='link here'>Link Item 3</a></li>
                    <li><a href='link here'>Link Item 3</a></li>
                    <li><a href='link here'>Link Item 3</a></li>
                </ul>
        </li>
    </ul>
</div>

Although this gives you a basic navigation list, it is nowhere near a nice navigation bar. This the main building block of what this tutorial works from. So there is still a lot of styling to do here. Just follow along from here with the CSS he shares and you should do just fine.

First, removing any decorations from the links is a good idea. This way you can avoid having underlined, colored menu options. Next, we need to get this out of a traditional list form and lay it out in a more common horizontal appearance. But we only want the main menu options to be horizontal, the sub menu options should be dropping down beneath these.

You may also want to color the menu bar and the drop down elements. Another great idea is to have the sub menu options appear when you hover of the corresponding main menu option and change color when you hover over them with your mouse.

All of these styling elements make for a much more interactive and friendly experience for the end user. And in the end you end up with some code looking similar to what you see at the end of this lesson. If you enjoyed this CSS tutorial, you will probably like this recent post on keeping things organized with divisions, classes and IDs.