How to Create CSS Horizontal Drop Down Menu


Drop down menu is a part of almost every web page today. These menus give a nice solution of choosing from the list of items to website visitors as well to Web Developers, so that they don’t have to worry about the presentation, as it can be now combined with appealing effects through CSS styling.

In this tutorial we will learn to create CSS horizontal drop down menu.

Step 1-Main Div of the Menu

First of all, open up the div tag , just after the body tag, and give it an id. This is our main div which will contain all the elements.

After that, open up an unordered list tag and then open up the list tag to define its members. We will insert the hyperlink tag which is called an anchor tag.

Then after this, we will write the heading for the first list. As this would act as the parent category, define it as “Main Category One”.

After that, open up an unordered list tag again and then define the child members for the Main category, in the same manner as we did earlier. This list will be considered as the sub categories of our main menu.

<body>
<div id=”global-nav”>
<ul>
<li><a href=”#One”>Main Category 1</a>
<div id=”global-subnav”>
<ul>
<li><a href=”#A”>Sub Category </a></li>
<li><a href=”#B”>Sub Category </a></li>
<li><a href=”#C”>Sub Category </a></li>
<li><a href=”#D”>Sub Category </a></li>
</ul>
</div>
</li>

Code for First Main element of Menu

Step 2- Second Main Category

With that done, we will follow the same pattern to make another category in our drop down menu.

We will start with the <li> tag and follow exactly the same pattern as before.

The Code for that would be:

<li><a href=”#Two”>Main Category 2</a>
<div id=”global-subnav”>
<ul>
<li><a href=”#1″>Sub Category </a></li>
<li><a href=”#2″>Sub Category </a></li>
<li><a href=”#3″>Sub Category </a></li>
<li><a href=”#4″>Sub Category </a></li>
</ul>
</div>
</li>

Code for second Category

Step 3- Global- Navigation Class Explained

Now add the CSS Styling on the drop down menu.

For that, open up the style tag beneath the HTML header and assign “text/ css” in style type.
Then describe the working of the classes, starting with the very first class we used, the global- nav class. This class is responsible for the Main look of the Menu. We have set its width to 135 pixels with left as its default position along with a background color.

Code for that would be:

#global-nav {
width: 135px;
float: left;
background: #e8eef4;
}

Main Navigation Class

Step 4- Anchor Class

After that, define the effects of the anchor tag. In this class, we are actually describing the effect of all the anchor tags inside the “global-nav “ class and specifying it a particular color, with a cursor type as pointer and setting its alignment as well.

The Code is:
#global-nav a {
color: #034af3;
cursor: pointer;
display: block;
height: 65px;
line-height: 40px;
text-indent: 10px;
text-decoration:none;
font-weight: bold;
width: 100%;
}

Anchor Class Defined

Step 5- Contents of Main Menu

With that done, the effect of the Main Menu’s contents is described in the global-nav ul class. The background color is specified as white smoke along with zero in padding and margins.

The code for this class would be:

#global-nav ul{
background: whitesmoke;
padding: 0;
margin: 0;
}

Global-Nav ul Class

Step 6-Sub Navigation Class

Next, we have defined the sub navigation menu class. This class will be responsible for the effect of the sub menu. We are using Grey as a background color and aligning it, with 80 pixels for the left side and minus 20 pixels for the top.

Code would be:

#global-subnav ul{
background: Grey;
position: relative;
left: 80px;
top:-20px;
}

Global- Subnav Class

Step 7- Global –Nav Li class

After that, the borders of the list elements are defined in the global –nav li class.

We are setting a solid color effect of border at bottom having a width of 3 pixels.

Its code would be:

#global-nav li{
list-style: none;
border-bottom: #5C87B2 solid;
border-width: 3px;
}

Border Effects of the Global Navigation class

Step 8- Display Style and Hover Effects

Next, we are defining the “li” class which refers to the inner elements of the main menu.

There we are setting its display as none by default. This means that the effect will be applied on the “li” which is inside an unordered list, which is nested inside another unordered list that can be found in global-nav class

Next, we will work on the hover effect, which will be defined here in which we have specified the color which would be changed once the mouse hovers over the option.

Lastly, the display of list elements is defined as Blocks, so that they will be displayed in separate segments.

Hover effects

Step 9- View in Browser

Save the file as html extension and then open it up in the browser to see the result. It would be observed that the menu will appear as the way we have coded it, having all the styles, colors, effects and hovers.

Hover effects

And that is how we can create CSS horizontal drop down menu.