I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items.
<ul id="menu">
<li><a href="#title">Home</a></li>
<li><a href="#part_1">Basic Commands --->></a>
<ul class="hidden">
<li><a href="#ls">ls</a></li>
<li><a href="#cd">cd</a></li>
<li><a href="#mv">mv</a></li>
<li><a href="#cp">cp</a></li>
<li><a href="#mkdir">mkdir</a></li>
<li><a href="#cat">cat</a></li>
<li><a href="#find">find</a></li>
<li><a href="#grep"></a></li>
</ul>
</li>
<li><a href="#part_2">System Commands --->></a>
<ul class="hidden">
<li><a href="#top">top</a></li>
<li><a href="#chmod">chmod</a></li>
<li><a href="#du">du</a></li>
<li><a href="#reboot"></a></li>
</ul>
</li>
</ul>
Here is the CSS code:
/*Menu*/
#menu {
float: left;
}
ul {
list-style:none;
width: 150px;
display:inline-block;
border: 1px solid black;
}
#menu li {
margin-bottom: 0px;
}
#menu li a:hover {
font-weight: bold;
}
.hidden {
margin-top: 0px;
}
/*Hide elements*/
#menu li ul li {
display: none;
}
/*Reveal elements on hover*/
#menu li a:hover + .hidden li, .hidden:hover {
display:block;
}
I've tried various solutions like adjusting margins and hovering zones but haven't had any success yet. The text always vanishes before I can interact with it. Any help would be appreciated.
Thank you for your assistance.