CSS Navigation Bar

Introduction to CSS Navigation Bar

CSS can be used to style navigation bars, which are typically used for site menus and links to various sections of a website.

Basic Navigation Bar Styling

• Use a ul element to create the structure of the navbar.
• Style links with display: inline-block to position them horizontally.
• Add padding and background color to enhance the design.

Example

nav ul {
    list-style-type: none;
    padding: 0;
    background-color: #333;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    color: white;
    padding: 15px;
    text-decoration: none;
}
nav ul li a:hover {
    background-color: #111;
}
        

Browser Support

Supported by all modern browsers.