To make the menu work, we need to add links to our list; otherwise, it will go nowhere. To add a link, you have to use the tag <a>. To make each <li> element clickable as a link, we need to add the <a> tag inside the <li> tag, as follows:

<li><a>Upcoming events</a></li>

Now we need to specify where the link goes. For that, we need to add the attribute href:

<li><a href="upcoming.html">Upcoming events</a></li>

If the href attribute is not present, the <a> tag won't act as a hyperlink. The value of href can be an absolute link to another website or a relative link to a file on the same domain. It's basically the same behavior as the src attribute we saw earlier.

In the end, our menu should look like this:

<ul>
  <li><a href="upcoming.html">Upcoming events</a></li>
  <li><a href="past.html">Past events</a></li>
  <li><a href="faq.html">FAQ</a></li>
  <li><a href="about.html">About us</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Lastly, let's add a class to our <ul> tag so we can specify the style later on with css, like this:

<ul class="main-nav">