CSS Drop Down Navigation Tutorial

51

by Shane Jeffers

CSS Drop Down Navigation


Drop down menus don’t have to be complicated… This tutorial shows just how easy it is to create a stylish drop down menu using only CSS.

First, let’s start off with the HTML that is necessary for the drop down menu. Start by creating a wrapping div. I called this #nav in this example. We are going to create our drop down menu with unordered lists. As you can see in the code below we have a standard unordered list that houses all of our navigation. Now, the main navigation items are Home, About Me, Portfolio, and Contact. The drop down items are Web, Print, and Photos. Take a look at the list item where portfolio is, I bolded it so you could see it better. Notice that the closing </li> is further down in the code (this tag is also bolded). We are putting another unordered list inside of the LI that has portfolio in it (The second unordered list is blue). This second unordered list will be the drop down menu when someone hovers over portfolio.

The HTML

<div id=”nav”>
    <ul>
        <li class=”first”><a href=”#”>Home</a></li>
        <li><a href=”#”>About Me</a></li>
        <li><a href=”#”>Portfolio</a>
        <ul>
            <li><a href=”#”>Web</a></li>
            <li><a href=”#”>Print</a></li>
            <li><a href=”#”>Photos</a></li>
        </ul>
        </li>
        <li><a href=”#”>Contact Me</a></li>
    </ul>
</div>

Ok that is it for the HTML on to the CSS

The CSS

First we setup the #nav div. Give it a width and height and a font size. It may take some small adjustments to the width and the height if you change the font-size value, so just be aware of that. The next line of code you see which is affecting the #nav ul, is used to get rid of the bullets. Since we put our navigation in a list by default it has bullets, so list-style-type: none, takes care of that.

*{ margin:0px; padding: 0px; }

#nav {
     font-family: arial, sans-serif;
     position: relative;
     width: 390px;
     height:56px;
     font-size:14px;
     color:#999;
     margin: 0px auto;
}

#nav ul {
     list-style-type: none;
}

This piece of code is what makes our navigation. If you leave out the float: left here the navigation would still be vertical. DO NOT FORGET to position this relative, because our drop down items will be absolute and will feed of this relative position

#nav ul li {
     float: left
     position: relative;
}

These styles are for the anchor tag that is inside of each of the lists. We need to use display block in order for the clickable area to be whole button and not just the text. We align the text center for style purposes. We also give each item a border right to have a nice separator in between. *You may be asking well the first list item needs a border left to complete it don’t worry we will come back to this later*

#nav ul li a {
     text-align: center;
     border-right:1px solid #e9e9e9;
     padding:20px;
     display:block;
     text-decoration:none;
     color:#999;
}

The Important Part

These two are the most important part of this tutorial. These give our menu the drop down functionality that we are looking for.  As you can see we are inside of our nav div, then inside the first unordered list, then inside the li, THEN INSIDE OUR SECOND unordered list. I know that might seem like a lot but just follow the trail. We tell it to display none because we do not want it to show up until the first unordered list is hovered over.

The second part is saying when the user hovers over the LI of the first unordered list, which is our Home, About Me etc.. buttons then display the second unordered list which are Web, Print, and Photos. We also position it absolute so that it stays in place right under our first list.

#nav ul li ul {
     display: none
}

#nav ul li:hover ul {
     display: block;
     position: absolute;
}

These are the styles for the hover states of the second unordered list. I gave it a teal color but you can change that to whatever you like.

#nav ul li:hover ul li a {
     display:block;
     background:#12aeef;
     color:#ffffff;
     width: 110px;
     text-align: center;
     border-bottom: 1px solid #f2f2f2;
     border-right: none;
}
#nav ul li:hover ul li a:hover {
     background:#6dc7ec;
     color:#fff;
}

The Complete CSS

*{ margin:0px; padding: 0px; }

#nav {
     font-family: arial, sans-serif;
     position: relative;
     width: 390px;
     height:56px;
     font-size:14px;
     color:#999;
     margin: 0px auto;
}

#nav ul {
     list-style-type: none;
}

#nav ul li {
     float: left;
     position: relative;
}

#nav ul li a {
     text-align: center;
     border-right:1px solid #e9e9e9;
     padding:20px;
     display:block;
     text-decoration:none;
     color:#999;
}

#nav ul li ul {
     display: none
}

#nav ul li:hover ul {
     display: block;
     position: absolute;
}

#nav ul li:hover ul li a {
     display:block;
     background:#12aeef;
     color:#ffffff;
     width: 110px;
     text-align: center;
     border-bottom: 1px solid #f2f2f2;
     border-right: none;
}

#nav ul li:hover ul li a:hover {
     background:#6dc7ec;
     color:#fff;
}

CSS Dropdown Menu Example

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email

Tutorials

  • http://twitter.com/maggiecogswell Maggie Cogswell

    Thank you!!