CSS Navigation Bar

A navigation bar, also known as a navbar or menu bar, is an important component of a website’s user interface. It is usually located at the top of the webpage and contains links to various sections of the website.

Here is an example of a simple navigation bar using HTML and CSS:

HTML:

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

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

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
}

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

nav li a:hover {
  background-color: #111;
}

In the above example, the nav element is used to create the navigation bar. The ul element is used to create an unordered list of links, and the li element is used to create each individual link.

The CSS styles set the background color of the navigation bar to #333 and use the overflow: hidden property to ensure that any content inside the navbar doesn’t overflow beyond its boundaries. The list-style-type, margin, and padding properties are used to style the unordered list, while the float property is used to align the links horizontally. The a element is styled to have white text, a centered text alignment, and a padding of 14px on top and bottom and 16px on the left and right. The :hover pseudo-class is used to change the background color of the links when the user hovers over them.

This is just one example of how to create a navigation bar in CSS. There are many different styles and designs that can be used depending on the website’s branding and design.