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?

Frequently Asked Questions on Creating an Animated Drop-Down Navigation Menu in HTML5/CSS3

How can I add more items to the drop-down menu?

Adding more items to the drop-down menu is quite simple. You just need to add more list items (

) within the unordered list (

) within each list item to ensure the menu item redirects to the correct page or section.

Can I change the animation speed of the drop-down menu?

Yes, you can adjust the animation speed of the drop-down menu by modifying the transition duration in your CSS code. The transition property is used to control the speed of the animation. For example, if you want to increase the speed, you can reduce the transition duration.

How can I change the color of the drop-down menu?

You can change the color of the drop-down menu by modifying the background-color property in your CSS code. You can use color names, hexadecimal color codes, or RGB values to specify the color.

Is it possible to make the drop-down menu responsive?

Yes, it is possible to make the drop-down menu responsive. You can use CSS media queries to adjust the style and layout of the menu based on the screen size. This ensures that the menu looks good on all devices, including desktops, tablets, and mobile phones.

How can I add icons to the menu items?

You can add icons to the menu items by using icon fonts or SVG icons. You need to include the icon code within the list item (

) in your HTML code. Remember to add appropriate classes to the icon code to style it correctly.

Can I add sub-menus to the drop-down menu?

Yes, you can add sub-menus to the drop-down menu. You need to create another unordered list (

) to create a sub-menu. Remember to adjust the CSS code to style the sub-menu correctly.

How can I change the direction of the drop-down menu?

You can change the direction of the drop-down menu by modifying the transform property in your CSS code. You can set the transform property to rotate the menu to the desired direction.

Is it possible to add a hover effect to the menu items?

Yes, it is possible to add a hover effect to the menu items. You can use the :hover pseudo-class in your CSS code to change the style of the menu item when the mouse pointer is over it.

How can I make the drop-down menu accessible?

You can make the drop-down menu accessible by adding appropriate ARIA roles and attributes to your HTML code. This helps screen readers understand the structure and functionality of the menu, making it accessible to users with disabilities.

Can I use JavaScript to enhance the functionality of the drop-down menu?

Yes, you can use JavaScript to enhance the functionality of the drop-down menu. For example, you can use JavaScript to add complex animations, handle user interactions, or load menu items dynamically. However, remember to ensure that the basic functionality of the menu works even without JavaScript, to maintain accessibility.