CSS Navigation Menu

Updated on 26-June-2022

CSS Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews

CSS Navigation menu is a layout element used to group hyperlinks in a webpage. We use <nav> tag to group all the hyperlinks in a webpage. Additionally we can also use html <ul> tag in nav to build navigation menu.

In this article, we learn how to build a simple navigation menu using html and css only.

Navigation Menu Structure HTML


<nav class="nav">
  <ul>
    <li><a href="">HOME</a></li>
    <li><a href="">ABOUT</a></li>
    <li><a href="">SERVICES</a></li>
    <li><a href="">SOLUTIONS</a></li>
    <li><a href="">CONTACT</a></li>
  </ul>
</nav>

CSS Menu using Flex

In this menu, we are using CSS Flexbox layout technique. Earlier we use float property to build menu, but now flex is recommended as flexbox supports almost all browsers (except IE 9 and below).


<style>
*{
  margin:0; 
  box-sizing:border-box;
}
a{ 
  text-decoration:none;
}
body{ 
  font-family:sans-serif;
}
.container{ 
  width:1200px; 
  margin:auto;
}
.nav{ 
  background:#222; 
  padding:5px;
}
.nav ul{ 
  list-style:none; 
  padding:0; 
  display:flex;
}
.nav ul li{
  margin:0px 5px;
}
.nav ul li a{ 
  color:#fff; 
  display:block; 
  padding:8px 12px;
}
.nav ul li:hover a{ 
  background:#ccc; 
  color:#000;
}
</style>

<div class="container">
    <nav class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">SOLUTIONS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</div>

CSS Menu using Float

This is the example for a css menu using float used before css flexbox layout. We use to float list item and add clear both in after of ul to stop wrapping of content.


<style>
*{ margin:0; box-sizing:border-box}
.container{ width:1200px; margin:auto}
a{ text-decoration:none}
.nav{ background:#222;}
.nav ul{ list-style:none; padding:0}
.nav ul li{
  float:left; 
  margin:0px 5px; 
}
.nav ul::after{
  content:"";
  display:block;
  clear:both;
}
.nav ul li a{ color:#fff; display:block; padding:8px 12px}

.nav ul li:hover a{ background:#ccc; color:#000;}  
</style>

<div class="container">
    <nav class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">SOLUTIONS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</div>