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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Sean

    I think you forgot an ID and maybe a class definition in the basic HTML; but maybe that’s our job to figure out :0

  • G

    As this is a menu, and is listed as an HTML5 tutorial, shouldn’t it be marked up using the Nav tag…

  • Chris

    What about browser compatibility? How does this menu degrade in non-compatible browsers? Just curious…

  • http://www.nurelm.com Greg

    Div id of “top” isn’t set which wasn’t a hard fix but, may confuse a beginner looking to play with this. Good write up.

  • http://www.leachcreative.com Andrew

    No demo? What about Chris’ question about compatibility?

  • viaria

    where is demo.

  • S

    And only -webkit? Shame…

  • Annonimous

    What is the DEMO?

  • http://rorywalker.com Rory

    I believe tutorials like these should have a demo so we can see what we are building before we start.

  • Chris Emerson

    Demo?

  • http://www.webmentor.cr/en/ Marco

    Mate, no demo?

  • http://www.devseo.co.uk/ Alex Hall

    Why HTML5? Looks like plain ol’ HTML to me. No nav element to speak of, despite displaying navigation. I also agree that a demo would be useful. But thanks for the write-up :-)

  • Joe Kukan

    Demo please, thank you!

  • http://www.umairulhaque.com Umair Ulhaque

    Nicely written, but i didn’t see any of HTML5 tag into this post and also there is no Demo to determine the output.

  • Anant

    No browser compatibility.. only web-kit supported..

  • http://atys.ir Ehsan

    Demo?

  • @artwitto

    Where should I place a “top” id?

  • http://www.creativejuiz.fr/blog/ Geoffrey