Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create a Horizontal Navigation Bar with CSS
To create a horizontal navigation bar with CSS, you need to change the default vertical display of list items to horizontal. The key is using display: inline or display: inline-block on the <li> elements to arrange them side by side.
Syntax
li {
display: inline;
}
/* Or for more control */
li {
display: inline-block;
}
Method 1: Using Display Inline
The following example creates a basic horizontal navigation bar using display: inline −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
overflow: hidden;
}
li {
display: inline;
}
li a {
display: inline-block;
color: #333;
text-decoration: none;
padding: 14px 20px;
}
li a:hover {
background-color: #ddd;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#company" class="active">Company</a></li>
<li><a href="#product">Product</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A horizontal navigation bar with light gray background appears. Menu items (Home, Company, Product, Services, Contact) are arranged horizontally. The "Company" item is highlighted in green, and other items change to light gray on hover.
Method 2: Using Flexbox
Modern CSS approach using flexbox for better control and responsiveness −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
display: flex;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 16px 24px;
transition: background-color 0.3s;
}
li a:hover {
background-color: #555;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about" class="active">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
A modern dark horizontal navigation bar appears with smooth hover transitions. Menu items are evenly spaced horizontally with the "About" item highlighted in green.
Conclusion
Creating horizontal navigation bars can be achieved using display: inline for simple layouts or flexbox for modern, responsive designs. Both methods effectively transform vertical lists into horizontal menu bars with proper styling and hover effects.
Updated on: 2026-03-15T12:28:03+05:30
4K+ Views
Advertisements