how to create a horizontal dropdown menu with html css

CSS tutorial, Here in this article we explained, how to create a horizontal dropdown menu with html css. We given CSS code with screenshots.

This tutorial explains how to build horizontal lists using “display: inline”.

There are many methods that can be used to making a horizontal list. The main ingredient is “display: inline”, applied to the “LI” element.

Step 1: Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in <a href=”#”> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the “a” element within the list items. For this example a “#” is used as a dummy link.

HTML CODE <div id="topnav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </div>

Step 2: Remove the bullets

To remove the HTML list bullets, set the “list-style-type” to “none”.

how to create a horizontal dropdown menu with html css

CSS CODE #topnav ul

{

list-style-type: none;

}

HTML CODE
<div id=”topnav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </div>

Step 3: Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to “0” for the “UL”.

CSS CODE #topnav ul

{

margin: 0px;

padding: 0px;

list-style-type: none;

}

Step 4: Display inline

To force the list into one line, apply “display: inline;” to the “LI”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}

Step 5: Removing text decoration

At this point you may wish to remove the text underline. It is a common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
}

Step 6: Padding around list items

To make each list item into a box, we need to add padding to the “a” element.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding: 1em 1em;
}

Step 7: Adding background color

At this point a background color and border can be applied. There are many combinations of border and background colors that can be used.

create horizontal rollover list with css

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}

Step 8: Add a rollover color

Use “a:hover” to set a second background color, as a rollover. Roll over the list now you will see how it works.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

Step 9: Center the list

To center the list, add “text-align: center;” to the “UL”.

CSS CODE

#topnav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#topnav ul li
{
display: inline;
}
#topnav ul li a
{
text-decoration:none;
padding:1em 1em;
color:#fff;
background-color:#808000;
}
#topnav ul li a:hover
{
color: #fff;
background-color:#000000;
}

And you done it.

Thank you!

how to create a horizontal dropdown menu with html css

Step 1: Make a basic list