CSS Navigation Bar

Navigation bars are the most critical part of any website. With CSS, you can turn a simple unordered list (<ul>) into a professional navigation menu.

Step 1: The Basic List

All navigation bars start with a standard HTML list. We remove the bullets and padding first.

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

Step 2: Vertical Navigation Bar

Making the links display as blocks ensures the whole area is clickable, not just the text.

li a {
    display: block;
    width: 200px; /* Optional width */
    padding: 8px 16px;
    text-decoration: none;
    color: black;
}

li a:hover {
    background-color: #2e7d52;
    color: white;
}

Step 3: Horizontal Navigation Bar

To make the list horizontal, we can either use float: left; or display: inline-block; on the <li> elements.

li {
    float: left; /* Aligns horizontally */
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    background-color: #333;
}