Write CSS to create a horizontal navigation menu

Description: Create a dark horizontal menu with the links Home, About, Services and Contact, and a different background when the mouse is over a link.

Hint:

• Remove bullets with list-style: none.
• Use display: flex on the ul.
• Style the a tags with padding, and add an a:hover rule.

---

CSS horizontal navigation menu

<style>
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: #333;
  }
  .menu a {
    display: block;
    padding: 12px 18px;
    color: white;
    text-decoration: none;
  }
  .menu a:hover {
    background: #0073aa;
  }
</style>

<ul class="menu">
  <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>

Output in the browser:

How it works

• A menu is a list of links. display: flex on the ul puts the items in one row.
• display: block with padding on the links makes the whole box clickable, not only the text.
• On your page, the background of a link turns blue when you hover over it (the hover colour does not show in this box).

Read CSS Lists and CSS Links.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.