I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwables or Gear. I have tried different approaches, such as adding another ul or li element between the Gear li elements, but each time I attempt this, my entire menu becomes distorted. Despite searching for solutions on YouTube and Google, I haven't been able to achieve the desired outcome.
In summary: I would like to implement an additional dropdown menu that appears when hovering over Throwables or Gear. The new menu should open to the right and maintain the same blue color when hovered over. Here is an example of how I envision it looking (with the rest of the menu positioned to the left of Equipment).
Here is a snippet of the menu code:
.navigatie_menu{
position: absolute;
left: 505px;
top: 95px;
z-index: 2;
}
ul {
padding: 0px;
list-style: none;
color: black;
}
ul li {
float: left;
width: 130px;
height: 40px;
background: rgba(223,223,223,0.95);
line-height: 40px;
text-align: center;
font-size: 17px;
color: black;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li a:hover {
background-color: #94bfea;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}<ul class="navigatie_menu">
<li><a>Equipment</a>
<ul>
<li><a href="Equipment/Gear.html">Gear</a></li>
<li><a href="Equipment/Throwables.html">Throwables</a></li>
</ul>
</li>
</ul>