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”.
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;
}
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 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;
}
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 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;
}
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 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;
}
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 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.
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;
}
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 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;
}
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 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;
}
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>
And you done it.
Thank you!