In today’s tutorial I’ll take you over the steps of creating a pure css dropdown menu. We’ll be using CSS2.1 properties mostly. Altho I’ll show you an extra little trick to add a + icon to those navigation items that has a dropdown attached to. For that, we’ll use the :only-child pseudo-element. But more on that at the end of the article.
[tutorial_details]
To get started we’ll create the basic structure of a navigation menu, with 6 list items in it. No dropdowns or anything yet.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>Then, we add a basic css styling to it. Instead of explaining the CSS below, I comment each code block out, so pay close attention to those.
/* Giving a background-color to the nav container. */
nav {
margin: 100px 0;
background-color: #E64A19;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #E64A19;
}
/* Styling the links */
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}After we applied the CSS, we should have something like this:
To add a dropdown to one of the items, we need to add a <ul> inside the <li> where we want to dropdown.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>As you can see in the code above, we added a new unordered list with 3 list items inside the 2nd <li>, which in this case is the WordPress menu item. Also note that we added the <ul> after the anchor tag.
Now, let’s add some CSS to make it be hidden by default, and only appear when we have over the parent element. So add the following after the above CSS:
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width:170px;
display:list-item;
position: relative;
}And if we done everything right, when we hover over the “WordPress” menu item, we should see a dropdown appear with the 3 other items we added. ( Themes, Plugins, Tutorials. ).
To add multi-level dropdowns, we’ll repeat the same process. We select the menu item we want to add the new dropdown to, and add a new <ul> between the <li>s of that menu item. Look at the HTML code below, where we add a 2nd tier dropdown to the “Tutorial” menu item inside the “WordPress” downdown.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
<!-- Second Tier Drop Down ends-->
</li>
</ul>
<!-- First Tier Drop Down ends -->
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>But in order for this to display correctly, we need to add a few more lines of CSS:
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul {
position: absolute;
top:0;
left:100%;
}And once again, if we done it right, we should have something like the following:
You can repeat the this process as many times as u want, to add more dropdown levels. Also, you don’t have to add it to the last item in the dropdown, I just did it for the sake of this tutorial.
Adding a Dropdown marker
Now that we have our css dropdown menu ready, all we have to do, is add a mark to those menu items that has a dropdown attached to them. We’ll add a plus sign ( + ) :
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }As I mentioned at the beginning of the tutorial, for this, we use a CSS3 pseudo-element, ( :only-child ), in our case, this checks if the the parent element has any other elements inside other then <li> tags. if not, then it removes the plus ( + ), which is added by default. And here’s how the final result should look like. See the + on next to “WordPress” and “Tutorials” ?
And that’s it, we’re done.
Conclusion
Many use jQuery to achieve this dropdown effect, or use other css techniques. This one is the one I find the easiest and simplest to create. There are many tutorials our there that offer different techniques, it’s up to you which one u choose.
Which way do you prefer to create your dropdowns? With CSS or jQuery? Let me know in the comments below!