How to Create a CSS Navigation Bar with Hover Effects and Borders (HTML + CSS Examples)

Navigation Bar

A navigation bar (or navbar) allows users to easily navigate between different sections of a website. You can create both horizontal and vertical navigation bars using HTML and CSS.

Horizontal Navigation Bar

Example:

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <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>
</body>

</html>

CSS

/* Reset default list styles */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style the navigation bar */
nav {
  background-color: #333;
}

nav ul {
  display: flex;
  /* Display items horizontally */
  justify-content: center;
}

nav li {
  margin: 0 15px;
  /* Spacing between items */
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 12px 20px;
  display: inline-block;
}

/* Hover effect */
nav a:hover {
  color: yellow;
}

Output:

Navigation Bar with Border Dividers

You can add vertical dividers between nav items using border-right.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: lightgray;
    }

    li {
      float: left;
      border-right: 1px solid blue;
    }

    li:last-child {
      border-right: none;
      /* Remove border on last item */
    }

    li a {
      display: block;
      color: blue;
      font-size: 20px;
      text-align: center;
      padding: 10px 20px;
      text-decoration: none;
    }

    .active {
      background-color: gray;
      color: white;
    }

    li a:hover {
      background-color: orange;
      color: white;
    }
  </style>
</head>

<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
  </ul>
</body>

</html>

Output:

Key Point

Use <ul> and <li> for menu structure.

Use display: flex for horizontal navbars.

text-decoration: none removes the underline from links.

Add :hover to style items on mouseover.

Use border-right for dividers (remember to remove it from the last item).