Create a stylish Horizontal Menu Bar with HTML and CSS

Tutorial on creating a simple and stylish Horizontal Menu Bar with HTML and CSS.

Creating the above menu bar with HTML and CSS is fairly simple. The menu bar we are going to create is of fluid width, so it spans to the entire width of the page. Before starting let us plan the menu links we need to add. Next we'll add a basic html markup with a <div> block and an unordered list of menu links within that <div>.

HTML Markup

<div>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
     </ul>
</div>

Note: I have used <div> element as a base for menu bar. If you use HTML5 then add <nav> element instead of <div>.

Recommended Read: Create RESPONSIVE Navigation Menu Bar with Twitter Bootstrap 3

Next we'll add css styles to make this plain html to look more like an actual menu bar. Here I have created a CSS ID selector called "menu", which we'll apply to the <div> element later in this tutorial.

#menu {
     margin: 0;
     width: auto;
     background-color: #565656;
     font-size: 16px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: left;
     padding: 8px;
     border-radius: 8px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     -o-border-radius: 8px;
}

#menu ul {
     margin: 0;
     padding: 8px 0;
     list-style: none;
     height: auto;
}

#menu li {
     display: inline;
     padding: 8px;
}

Next we'll add some styles to the anchor links.

#menu a {
     color: #FFF;
     padding: 10px;
     text-decoration: none;
}

#menu a:hover {
     background-color: #1B191B;
     color: #FFF;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -o-border-radius: 20px;
}

We are almost finished except for one thing. We have to show some difference between the active menu link and the other menu links. So we add another one CSS class named "active".

#menu li .active {
     background-color: #1B191B;
     color: #FFF;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -o-border-radius: 20px;
}

Ok done. Now it's time to apply these CSS styles to the HTML markup we've created earlier.

HTML Markup for Horizontal Menu Bar

<div id="menu">
     <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
     </ul>
</div>

Here is the complete CSS Code for the horizontal menu bar we have created.

CSS Code for Horizontal Menu Bar

#menu {
     margin: 0;
     width: auto;
     background-color: #565656;
     font-size: 16px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: left;
     padding: 8px;
     border-radius: 8px;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     -o-border-radius: 8px;
}

#menu ul {
     margin: 0;
     padding: 8px 0;
     list-style: none;
     height: auto;
}

#menu li {
     display: inline;
     padding: 8px;
}

#menu a {
     color: #FFF;
     padding: 10px;
     text-decoration: none;
}

#menu a:hover {
     background-color: #1B191B;
     color: #FFF;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -o-border-radius: 20px;
}

#menu li .active {
     background-color: #1B191B;
     color: #FFF;
     border-radius: 20px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     -o-border-radius: 20px;
}

---

Demo

Our Horizontal Menu Bar will now look like this.

Download Code View Demo

---

Recommended Read: How to Create Round Social Media icon style buttons using CSS

Recommended Read: How to add Photo Frame Effect to Images using pure CSS

Conclusion

Like I said in the beginning, it is really very simple to create this horizontal menu bar. You can change the background and text color of the menu bar to suit your need. Like this tutorial? Please share it in your circle. Have trouble in implementing it? Let me know your voice through comments.

Last Modified: Nov-21-2015