CSS Navigation Bar

A CSS navigation bar, also known as a menu bar, is a common element used in web design to create a horizontal or vertical list of links that allow users to navigate through different sections of a website. Here’s an example of how you can create a basic horizontal CSS navigation bar:

HTML:

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:

css

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

nav li {
  display: inline-block;
}

nav li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #000;
}

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

In this example, we use an HTML <nav> element to wrap the navigation bar. Inside the <nav>, we have an unordered list <ul> that contains the individual navigation items as list items <li>. Each navigation item is an anchor <a> element with a corresponding link. In the CSS, we style the navigation bar by setting the list-style-type to none, removing the default list styling, and removing any margin and padding. We set the list items to display as inline-block, allowing them to appear horizontally. The anchor elements are styled as block elements, and padding is added to create some spacing around the links. The :hover pseudo-class is used to apply a background color when the user hovers over a navigation item.

You can further customize the navigation bar by adjusting the styles according to your design requirements, such as changing the font, colors, adding dropdown menus, or making it responsive for mobile devices.