How to Create a Top Navigation Bar with CSS

A navigation bar is a crucial element of any website as it helps visitors to navigate the site with ease.

In this tutorial, we will show you how to create a top navigation bar using CSS.

Whether you are a beginner or an experienced developer, this guide will provide you with all the necessary steps to create a navigation bar that is not only stylish but also functional.

Step 1: HTML Markup

The first step to creating a top navigation bar is to write the HTML markup.

The navigation bar is usually created using an unordered list, where each list item represents a menu item.

Here is an example of the HTML markup for a navigation bar with four menu items: Home, About, Services, and Contact.

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Step 2: Basic Styling

In this step, we will add some basic styling to the navigation bar using CSS.

We will set the background color, text color, and font-size.

Here is an example of the CSS code to add basic styling to the navigation bar:

header {
background-color: #333;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}

nav li {
display: inline-block;
background-color: #333;
margin-right: 1px;
position: relative;
}

nav a {
display: block;
padding: 0 10px;
color: #fff;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}

Step 3: Add hover effect

To make the navigation bar more interactive, we will add a hover effect that changes the background color of each menu item when the mouse is over it.

Here is an example of the CSS code to add the hover effect:

nav a:hover {
background-color: #555;
}

Step 4: Add active state

The active state is used to highlight the current page that the visitor is on.

To add the active state, we will use the :active pseudo-class. Here is an example of the CSS code to add the active state:

nav a:active {
  background-color: #999;
}

In some cases, you may want to add a dropdown menu to your navigation bar.

To create a dropdown menu, we will add a sub-menu inside each list item.

Here is an example of the HTML markup for a navigation bar with a dropdown menu:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">About</a>
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Team</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
  </nav>
</header>

And here is an example of the CSS code to style the dropdown menu:

nav ul ul {
  display: none;
  position: absolute; 
  top: 60px; 
}

nav ul li:hover > ul {
  display:inherit;
}

nav ul ul ul {
  margin-left: 100%; 
  top: 0; 
}