Create a rocking drop down navigation menu using css3

The web is constantly improving and new techniques are constantly being taught throughout the web. In today’s tutorial I will explain to you, how you can create a drop down menu using just html and css3.


The first thing you want to do it create a new folder on your desktop or a good place to hold your drop down menu. Then open up your text editor and create a .html file.

The next thing we are going to do is add in some html.

The above code is the code used to make the structure of our drop down menu navigation. The menu navigation above consist of the li tag which means list. To make the drop down menu I have added another list inside of a list. For example the code below is just a simple list with no drop down.

Now if you take a look at the code below you will see how you can add another list within a list to create a drop down menu.

Note: It has to be styled before it appears as a drop down but this is the just the markup.


The css is the spice to our drop down menu. We use css to style our drop down menu and make it look worth while. First thing you want to do is save your html document. Now create a css file and save it as style.css.

Note: Make sure to call your .css file in the head of your html document. Place the code below above the head tag in your html document.

Now that you have your style.css file open we can now begin adding our style in. Add the code below into your stylesheet. The code below is just a reset for your css and the container is just to keep our drop down menu contained.

Now here is the part of where we begin the actual styling of our drop down menu. Copy and paste the code below into your stylesheet and I will explain it below.

The code below is the styling of our html list items. Many of you are probably familiar with the css but not familiar with css properties like -moz-linear-gradient. The moz targets firefox and linear-gradient is the new way of achieving a gradient without using an image.

Copy and paste the code below into your stylesheet document and I will explain it below.

The code above is the styling of the hover effect used in the drop down menu navigation. For example whenever you roll over a button that has a drop down menu you see the effect happen. After you have placed the code above into your stylesheet you now have created a drop down menu using pure css3.

CSS3 is not widely supported now days but is supported in most browsers. If you’re not familiar with css3 start to use it in your projects to gain a great understanding of it. Also subscribe to our RSS FEED to stay up to date with the web trends and of course to learn new tricks and techniques.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

    I came here by visiting SIX REVISIONS tutorials, and i found some of youre work, i think it’s great, like to learn from the best ones like you!!

    Greetings from Tijuana México!

  2. john carswell says:

    Great tutorial, however when you add this script into another html script and combine it with other css code the dropdowns lose relativity and do not line up the same way. How do I keep the dropdowns lined up correctly?

Leave a Reply