In previous tutorials, we have gone over how to create a navigation menu using CSS3. We are going to take it a step further and add a dropdown menu to the mix. We will learn how to create a CSS3 animated dropdown menu using some creatives techniques in css transitions and positioning to display our dropdown.

CSS3 Animated Dropdown Menu

Setting Up the Document

The main idea is that we want our menu to function properly based off the HTML given. There are ways are making the sub menu become hidden (which we highly suggest not doing since search engines will not be able to find your sub category links to other pages) but we find the best way is to have the sub-links positioned somewhere off the screen and will move to the position once hovered. With this in mind we can start making our markup.

Our menu is comprised of five main links with three of them having four sub-links. As a way to separate our links and better organization, we gave our first ul and ID so we can control all links after.

Adding the CSS

Now it is time to add a little style to our menu. We will first need to style our first level ul and #navMenu using the direct descendent operator &gtl. This will allow us to choose the first level ul and not the secondary ul that are nested later down the DOM tree. We have also made notes using the /**/ CSS comment to point out certain properties that are very important to making this dropdown menu work.

Our first section uses the > operator to style only the first level ul section. The second section styles target only the dropdown. As you can see everything looks pretty normal until we start styling the dropdown menu. Everything mostly relies on the #navMenu ul selector. Here, you will see the content is absolute positioned off the page. We are able to bring the sub-menu back onto the page by targeting the #navMenu li:hover ul selector by changing the top value.

There are other key factor into play here that are worth pointing out. In order to get the animated effects you see, we utilize the transition property that will tell the computer to move the elements within a given time frame (we chose .3s as our parameter). Another key component in making this dropdown menu work normally is the z-index property. By adjusting the Z-index of the elements, we can place the dropdown menu behind the navigation menu to give the illusion that is is appearing from within the menu. If not, then the sub menu will inherently float above the menu.

Wrapping It Up

If you are for a beginner’s web design solution to creating a drop down menu, you will find a lot of great resources and ideas within this tutorial. Although it is a very effective solution, it does have some draw back regarding Responsive Design and cross browser compatibility. To solve these issues, we suggest looking into a jQuery fallback solution to make the ultimate drop down menu.