Creating an Animated Drop-down Navigation Menu in HTML5/CSS3 and Webkit

This is a tutorial for beginner and intermediate HTML5 and CSS3 developers who want to create a drop-down menu. The menu we’re creating is animated using only CSS … there’s no JavaScript in sight!

A demo of the outcome of this tutorial can be found here.

We’ll set out our HTML using a nav body and provide an id of “top”. The next step will be to create a few lists with a href of “#”, and give your link a class of “toplink”. Inside each of those lists we will be nesting an unordered list and then three list items for each link of navigation, including its href.

<nav id="top">
  <ul>
    <li> <a class="toplink" href="#">Item One</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Two</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Three</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
    <li><a class="toplink" href="#">Item Four</a>
      <ul>
        <li><a href="#">Drop Menu 1</a></li>
        <li><a href="#">Drop Menu 2</a></li>
        <li><a href="#">Drop Menu 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

That’s the navigation complete, but feel free to edit the text and links for your own needs.

On to the the CSS

Using the ids that we declared in the HTML we will structure our navigation bar with some color, and of course the drop-down animations (I’ve included some hover colors too).

First we will set the z-index (for stacking), width, line-height, padding and background color for the navigation box (#top):

#top { 
  z-index: 2; 
  width: 200px; 
  line-height: 2em; 
  background: #222222; 
  padding: 30px; 
} 

Then we’ll take the navigaiton list and list links and give them color and some padding to sit in their own boxes:

 #top li li, #top li li a { 
  height:0px; 
  margin-top: -10px; 
  text-align: center; 
  color: rgba(255,255,255,.0); 
  text-decoration: none; 
  -webkit-transition:all .7s ease-in-out;
 } 

Next we’ll give the drop-down menus some padding, a rounded border and a hovering color change effect:

 #top li:hover li { 
  height:40px; 
  margin-top:5px; 
  margin-bottom: 5px; 
  background: #333333; 
  border-radius: 20px; 
} 

#top li li:first-of-type { 
  padding-top: 15px; 
} 

#top li:hover li a { 
  color: rgba(255,102,0,.8); 
} 

#top li li a:hover { 
  color:#ffffff; 
} 

Lastly we will remove bullet points from all lists on the page and give the links a nice orange color, and remove their underlines:

 li { 
  list-style: none; 
} 

a { 
  color: orange; 
  text-decoration: none; 
} 

Once you’ve completed the tutorial you can style the navigation all you like! This is a basic example, and you can maneuvre and redesign it to fit your website to your liking.

If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 for the Real World.

Comments on this article are closed. Have a question about HTML? Why not ask it on our forums?