CSS Horizontal Navigation Bar

A horizontal navigation bar is a common layout for website navigation menus. It typically consists of a series of links or buttons placed horizontally across the top of the webpage.

Here’s an example of a basic horizontal navigation bar using CSS:

HTML code:

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

CSS code:

nav {
  background-color: #333;
  overflow: hidden;
}

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

nav li {
  float: left;
}

nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

In this example, we use a <nav> element to wrap our navigation menu. The <ul> element contains a list of links represented by <li> elements. We set the list-style property to none to remove the default bullet points from the list.

We use the float property to position the list items horizontally. To center the navigation menu on the page, we set the justify-content property of the <ul> element to center.

To make the links more visually appealing, we set their display property to block, and add padding, a background color, and a hover effect on mouse-over.

This is just a basic example, and you can customize the navigation bar further to suit your needs, such as adding drop-down menus or different color schemes.