Create a Horizontal Navigation Bar with CSS



To create a horizontal navigation bar, set the <li> elements as inline.

Example

You can try to run the following code to create horizontal navigation bar

Live Demo

<!DOCTYPE html> <html>    <head>       <style>          ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }       </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>
Updated on: 2020-07-01T11:02:38+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements