How to create a horizontal menu in CSS
Creating a menu in HTML, all starts by creating an unordered list. After creating the unordered list and adding various list items you can start styling the menu via the CSS in order to create a horizontal menu. Creating a horizontal version of the various menu items can be realized by means of the CSS property display or by means of the CSS property float. Please find below the HTML we have used to create the menu, followed by an example to make the menu horizontal by means of the display property and on its turn followed by an example to make the menu horizontal by means of the float property:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
Option 1: display: inline;
li{
display: inline;
}
li{
display: inline;
}
Option 2: float: left;
li{
float: left;
}
li{
float: left;
}