Each page have a navigation area, which links to all the other pages within that section of the website. This is great, but in order to go to, say, the FAQs page from the home page, you'd first have to go to the about page, then on to the FAQs from there. This is by not acceptable.With the help of some advanced selectors a dropdown menu can be easily created with CSS. Follow the step by step process of creating your own CSS Dropdown Menu.

The menu we’ll be creating have two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown.

Download Drop Down Menu

The HTML Structure

Firstly we need to create a HTML structure for our CSS menu. We’ll use HTML5 to make the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

We will add the first sets of sub-menu under the “Tutorials” and “Blog” links, each one being a complete unordered list inserted within the <li> of its parent menu option.
The secondary sub-menu is nested under the “JQuery” option of the first sub-menu. These links are placed into another unordered list and inserted into the “JQuery” <li>.

The CSS Styling

Let’s begin the CSS by getting the basic dropdown functionality working. First hide the sub menus by targeting any UL’s within a UL with the display:none; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

The main navigation bar is now all styled up, but the sub menus still need some work. To make sure they fly out under the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom). The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background.

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

Download Tutorial.