Drop Down Menu with HTML, CSS and jQuery

I am working on a website for my wife’s non-profit. We were discussing various navigational menus and decided upon a drop down menu. A drop down menu displays a horizontal row of top level menu items. As you mouse over a top level item, the sub items for that item are displayed. This post will explore the development of a drop down menu using semantic HTML, CSS and jQuery.

Demo

HTML

The HTML for the drop down menu looks like the following:

<div id="menucontainer">
    <ul id="nav">
        <li>
            <a href="#">Menu Option 1</a>
            <ul>
                <li>
                    <a href="#">Submenu Option 1</a>
                </li>
                <li>
                    <a href="#">Submenu Option 2</a>
                </li>
                <li>
                    <a href="#">Submenu Option 3</a>
                </li>
                <li>
                    <a href="#">Submenu Option 4</a>
                </li>
                <li>
                    <a href="#">Submenu Option 5</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menu Option 2</a>
            <ul>
                <li>
                    <a href="#">Submenu Option 1</a>
                </li>
                <li>
                    <a href="#">Submenu Option 2</a>
                </li>
                <li>
                    <a href="#">Submenu Option 3</a>
                </li>
                <li>
                    <a href="#">Submenu Option 4</a>
                </li>
                <li>
                    <a href="#">Submenu Option 5</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menu Option 3</a>
            <ul>
                <li>
                    <a href="#">Submenu Option 1</a>
                </li>
                <li>
                    <a href="#">Submenu Option 2</a>
                </li>
                <li>
                    <a href="#">Submenu Option 3</a>
                </li>
                <li>
                    <a href="#">Submenu Option 4</a>
                </li>
                <li>
                    <a href="#">Submenu Option 5</a>
                </li>
            </ul>
        </li>
    </ul>

</div>

The menu is contained within an outer div (“menucontainer”) and is composed of nested unordered lists. The outer layer of the unordered lists defines the top level menu. The inner layer the drop down elements. Notice that each list element contains an anchor that directs the user to a new page.

CSS

The CSS to style the above elements to display the initial drop down menu structure is shown below:

#menucontainer
{
    overflow: hidden;
    background-color: #6f75b4;
}

#nav
{
    margin: 0;
    padding: 0;
}

#nav li
{
    list-style: none;
    float: left; /* arrange top level items horizontally */
}

#nav a
{
    display: block;
    padding: 10px 25px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

#nav li a:hover
{
    background: #2e3692;
}

#nav li ul
{
    position: absolute;
    margin: 0;
    padding: 0;
}

#nav li ul li
{
    float: none; /* arrange submenus vertically */
    border-top: solid 1px #101982;
}

#nav li ul li a
{
    background: #2e3692;
}

#nav li ul li a:hover
{
    background: #6f75b4;
}

The two key styles to get the elements to arrange in the shape of a drop down menu are the two floats that include a CSS comment. The first float arranges the top level elements horizontally and the second float arranges the sub menu elements vertically. There is also a bit of color and font selections added to the design.

JavaScript (jQuery)

The JavaScript that is necessary to bring this design to life is show below:

<script language="javascript" type="text/javascript">

    // Hide all the submenu ul/li s
    $("#nav li ul").hide();

    // Hook up mouse over events
    $("#nav li").hover(
        function() {
            var sibling = $(this).find("a").next();
            sibling.show();
        },
        function() {
            var sibling = $(this).find("a").next();
            sibling.hide();
        }
    );
</script>

The first line of jQuery hides all the inner unordered list elements. We could have done this in the CSS. However, that would have left the site with the submenu items hidden if JavaScript were disabled. At least the site will now continue to function (it won’t be pretty).

The second line of jQuery hooks up the mouse ‘hover’ to all the ‘li’ elements. This code shows the previously hidden sub items on mouse over events and hides them on mouse out.

Summary

Drop down menus are a nice option to display a navigational system with many links in a visually pleasing way that does not inhibit user experience.