Dropdown - cant click on the items-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

You set the submenu ul to be visible when hovered on parent li item here: #navContainer ul li:hover ul, so as soon as mouse leaves parent li, the submenu ul visibility is set back to none.

Added a border to the li elements to demonstrate.

https://jsfiddle.net/rojqczsp/

You have to work around this. May be try making parent li elements big enough to hold the submenu ul and set the submenu ul position to absolute to keep it within the parent element's dimensions. Or something else. But hope you understand how it works.