Navigation Bar

Creating a navigation bar in CSS typically involves styling an HTML list as a horizontal or vertical menu.

Horizontal Navigation Bar:

Example:

We start with an HTML structure where the navigation bar is a list (<ul>) contained within a <nav> element.
We use CSS to style the navigation bar by setting the background color, displaying the list items horizontally using flex, and adding some margin between the list items to create spacing.
We style the links (<a>) within the list to have white text color and remove the underline using text-decoration: none.
We add a hover effect to change the link color to yellow when the mouse hovers over it.
You can further customize the navigation bar's appearance by adjusting the CSS properties like font-size, font-family, padding, and more to fit your design preferences.
This example creates a simple horizontal navigation bar. You can adapt the CSS and HTML to create vertical navigation bars or more complex navigation menus with dropdowns and submenus as needed.

HTML structure:

<!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(styles.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 the list items horizontally */
}
nav li {
   margin: 0 15px; /* Add spacing between list items */
}
nav a {
   color: white;
   text-decoration: none;
}
/* Change link color on hover */
nav a:hover {
   color: blue;
}

Output:

Border dividers:

The border between the links in the navigation bar can be added by using the border-right property.

Example:

< !DOCTYPE html>
    <html>

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

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

            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: