Creating Menus and Navigation Bars in CSS

Practical walkthrough: build menus and navigation bars with CSS – horizontal layouts, responsive behaviour, dropdowns, and Flexbox.

Why navigation matters

A navigation bar is more than a list of links. It is how visitors move around your site. A good one looks clear and helps people find what they need without hunting.

Basic HTML structure

Start with a simple <nav> and an unordered list:

<nav class="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Basic CSS styling

This gives you a horizontal bar with a dark background and hover states:

.navbar {
    background-color: #333;
    overflow: hidden;
}

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

.navbar li {
    float: left;
}

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

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

Responsive menu

On smaller screens, stack the links vertically:

@media screen and (max-width: 600px) {
    .navbar li {
        float: none;
        width: 100%;
    }
}

Below 600px, each link spans the full width instead of sitting side by side.

Dropdown menus

Dropdowns help when you have more links than fit comfortably in the main bar.

HTML

<li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
</li>

CSS

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Flexbox navigation

Flexbox is often easier than floats when link labels vary in length:

.navbar ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.navbar li {
    flex: 1;
}

Items sit in a row with space distributed evenly between them.

Icons and animations

Icon fonts such as Font Awesome can sit alongside link text. A simple hover scale adds a bit of feedback:

.navbar a {
    transition: 0.3s;
}

.navbar a:hover {
    transform: scale(1.1);
}

Accessibility

Navigation should work with a keyboard and make sense to screen readers. Test tab order, visible focus states, and semantic markup (<nav>, proper link text) before you ship.

Try different layouts and see what fits your site. The examples above cover the common patterns – horizontal bar, stacked mobile menu, dropdown, and Flexbox alignment.