Definition:
CSS Horizontal Navigation bar displays the menu horizontally. To build a horizontal menu, you need to specify the <li> elements into display inline.
Horizontal Navigation Bar
See an below image of horizontal navigation bar.
By default <li> elements are display in a list, you need to use list-style-type property to hide the bullets and apply display:inline property to <li> elements.
See an example below with source code.
Source Code:
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightgrey;
}
li {
display: inline;
}
</style>
<body>
<h3> Horizontal Naviation Bar</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
Floating List Items
You can make horizontal list items by applying float property in <li> elements. See an example below of using float property to create horizontal menu bar.
Source Code:
<!DOCTYPE html>
<html>
<style>
li {
float:left;
list-style-type: none;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
<body>
<h3> Floating Horizontal List Items</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
Right Align List Item
If you need your last <li> item in the right hand side and other remain same at left hand side, apply the below style to your last <li>
style="float:right"Source Code:
<!DOCTYPE html>
<html>
<style>
li {
float:left;
list-style-type: none;
}
li:nth-child(4){
float:right;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
<body>
<h3> Right Align List Item</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
In the above source code, the fourth element “contact” is selected by using nth-child(n) property and apply float: right property value to keep at the end of the right side.
Horizontal Navigation Bar With Border Right Dividers
To separate each navigation bar, you need to apply border-right in your <li> elements and remove the border at your last <li> child.
See the below source code and output to understand more in details.
Source Code:
<!DOCTYPE html>
<html>
<style>
li {
float:left;
list-style-type: none;
border-right: 3px solid grey;
}
li:last-child {
border-right: none;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
text-decoration:none;
}
</style>
<body>
<h3> Border Right Dividers</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
Horizontal Navigation Bar With Border Left Dividers
You can also use border-left to separate the navigation bar menu, but make sure you only apply the border-left property to all <li> elements except the first child of <li> element.
See an below example with source code and output.
Source Code:
<!DOCTYPE html>
<html>
<style>
li {
float:left;
list-style-type: none;
border-left: 3px solid grey;
}
li:first-child {
border-left: none;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
text-decoration:none;
}
</style>
<body>
<h3> Border Left Dividers</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics:
- CSS Fixed H. Navigation Bar
- CSS Horizontal Navigation Bar
- CSS Vertical Navigation Bar
- CSS Navigation Bar Define