Need help fixing my dropdown menu issue. Whenever I hover over the dropdown, it disappears before I can click on any items. Here is a snippet of the code causing the problem:
#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>Hover over to see how the navbar disappears while moving the mouse between McDonalds and KFC
Attempted to add toggle functionality to the navbar on clicking Quiz's, but couldn't get it to work. Looking for assistance in resolving this issue.