Write an HTML program to create a navigation menu

Description: Create a navigation menu with the links Home, About, Services and Contact, shown in one line.

Hint:

• A menu is a list of links, so use ul, li and a inside a nav tag.
• Use CSS to remove the bullets and show the items in one line.

---

HTML navigation menu

<nav>
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<style>
  .menu { list-style: none; padding: 0; }
  .menu li { display: inline-block; margin-right: 15px; }
</style>

Output in the browser:

How it works

• The nav tag tells that this block has navigation links.
• list-style: none removes the bullets, and display: inline-block puts the items in a row.

Read HTML Semantic Elements.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.