Dropdown - cant click on the items

Question

I'm trying to fix my dropdown, whenever I hover over my dropdown I can't click on the items because it disappears before I can click on them. I don't know how to fix it. Here is a bit of code I have.

#navContainer {
  margin: 0;
  padding: 0;
  padding-top: 17px;
  width: 220px;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navContainer ul li {
  position: relative;
}

#navContainer ul li span {
  display: block;
}

#navContainer ul li a {
  text-decoration: underline;
  color: orange;
  display: block;
  padding: 8px;
  font-weight: bold;
  font-size: large;
}

#navContainer ul ul {
  position: absolute;
  display: none;
}

#navContainer ul li:hover ul {
  width: 80%;
  position: absolute;
  display: block;
  left: 88px;
  top: 0;
}

<div id="navContainer">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li>
      <span><a href="#">About </a></span>
      <ul>
      </ul>
    </li>
    <li>
      <span><a href="#">Quiz's</a></span>
      <ul>
        <li><a href="#">McDonalds</a></li>
        <li><a href="#">KFC</a></li>
        <li><a href="#">Burger King</a></li>
        <li><a href="#">Subway</a></li>
      </ul>
    </li>
    <li><span><a href="#">Info</a></span></li>
  </ul>
</div>

This is how my page looks, if i try to move my mouse from McDonalds to KFC my navbar disapears

I tried to make it so the navbar toggles when i click on Quiz's but i couldn't make it work. I hope someone can help me fix it.

Answer 1

Just a couple of issues with your selectors in your CSS. I added background-color so you can see visually how they are connected. Also, the span seemed unnecessary.

#navContainer {
  margin: 0;
  padding: 0;
  padding-top: 17px;
  width: 220px;
  position: relative;
}

#navContainer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: lightgrey;
  position: relative;
}

ul>li {
  position: relative;
}

#navContainer ul li a {
  text-decoration: underline;
  color: orange;
  display: block;
  padding: 8px;
  font-weight: bold;
  font-size: large;
  position: relative;
}

#navContainer ul>li>ul {
  position: absolute;
  display: none;
  left: 100%;
  width: 100%;
  background-color: pink;
  top: 0px;
}

#navContainer>ul>li:hover>ul {
  display: block;
}

<div id="navContainer">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About </a>
      <ul>
      </ul>
    </li>
    <li>
      <a href="#">Quiz's</a>
      <ul>
        <li><a href="#">McDonalds</a></li>
        <li><a href="#">KFC</a></li>
        <li><a href="#">Burger King</a></li>
        <li><a href="#">Subway</a></li>
      </ul>
    </li>
    <li><a href="#">Info</a></li>
  </ul>
</div>