CSS Navigation Bar

Almost every website has a navigation bar — the row of links at the top that takes you to Home, Courses, About, or Contact. Without it, a visitor would be lost on the very first page. A navigation bar is just an HTML list of links, styled with CSS until it looks like a proper menu instead of a bullet list.

Diagram — see how it fits together

The trick is simple: take a <ul>, remove its bullets and spacing, lay its items out in a row, and style the links inside them as blocks with padding and a background colour. Once that base is in place, you can add hover effects, mark the current page, and even build dropdown menus.

Turning a list into a bar

Start with a <ul> inside a <nav> element. Remove the bullets with list-style-type: none and the default spacing with margin: 0 and padding: 0. Then give the <ul> a dark background colour and make it a flex container with display: flex — the list items line up in a row automatically.

Syntax — a horizontal bar

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}
ul.nav a {
  display: block;
  color: white;
  padding: 14px 20px;
  text-decoration: none;
}

Each link is display: block, so the whole padded area is clickable — not just the letters. That matters on phones, where a finger is much wider than a mouse pointer.

Hover and the active page

A link should react when the mouse passes over it. The :hover pseudo-class changes its background colour, which tells the visitor "you can click here". The page the visitor is currently on gets a special class, usually called active, with a different colour — often green — so they always know where they are.

ul.nav a:hover {
  background-color: #111;
}
ul.nav a.active {
  background-color: #04aa6d;
}

Dropdown menus

A dropdown is a small menu that appears when you hover over one link, like "Courses" opening to show HTML, CSS, and Python. It works with two ideas: the parent <li> is position: relative, and the submenu is position: absolute and hidden with display: none. A :hover rule on the parent flips it to display: block, and the submenu drops down underneath.

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

Common mistakes

• Forgetting list-style-type: none — the bullets stay and the bar looks like a plain list.
• Forgetting margin: 0 and padding: 0 on the <ul> — the browser's default spacing pushes the bar away from the edges.
• Styling the <li> instead of the <a> — only the letters become clickable, and the padding area does nothing.
• Positioning the dropdown without position: relative on its parent — the submenu appears in a random place on the page instead of under its link.
• Making the hover colour the same as the normal colour — the visitor gets no feedback that the link can be clicked.

Remember

• A nav bar is a <ul> with bullets and spacing removed, laid out in a row.
• Make links display: block with padding, so the whole area is clickable.
• :hover changes the link's background; .active marks the current page.
• A dropdown hides with display: none and appears on :hover.
• The dropdown's parent needs position: relative and the menu needs position: absolute.

Example explained

• ul.nav — the whole menu: bullets and default spacing removed, a dark background, and display: flex so the items sit in a row.
• ul.nav a — every link is a block with white text and wide padding, so the full coloured area is clickable.
• ul.nav a:hover — when the mouse passes over a link, its background turns darker, showing it can be clicked.
• ul.nav a.active — the Home link carries the active class, so it is green and the visitor knows which page they are on.
• .dropdown-content — the Courses submenu is hidden with display: none and position: absolute; .dropdown:hover .dropdown-content shows it when the mouse hovers over Courses.