How to Create a CSS Drop Down Menu

It used to be that if you wanted to create a drop down menu then you needed to use a lot of background images as well as complicated Javascript. Today however all of that is a thing from the past. In this tutorial the DeveloperDrive Team will create a simple yet very effective drop down menu using only CSS. They will build their drop down menu in two steps, first they will construct a simple menu using HTML and then add the styling with CSS. They will create this drop down menu by using the <nav> element, as well as the display:block, and use the position element in order to position the menu.

The first thing to do is create the HTML structure for our drop down menu. For this purpose the DeveloperDrive Team will use the HTML5 element, then add the primary navigation links in a simple unordered list. Now that they have their basis layout it is time for use to start creating the sub-menus. For the first sets of sub-menus add the “Categories” and the “Most Popular”. Now that you have created the first sub-menus it is time for you to create a sub-menu within the sub-menu. When you are finished with the basic menu it is time to add the styling with CSS. The first thing they want to do is to hide the sub menus, they will do this by telling the code to hide any UL’s that are already inside a UL by using declaration.