I am currently experiencing an issue with my submenu disappearing when I move the mouse out of the a-element. As a new student in web development, I have spent hours searching on Google for solutions but haven't been able to resolve it.
One solution I tried was using .topbar #menus li:hover + .sub, however, this caused the submenu to not show up at all.
I would greatly appreciate any help or suggestions regarding this problem.
.topbar #menus{
position: absolute;
display: flex;
flex-flow: row;
justify-content: space-around;
}
.topbar #menus > li{
border: 2px solid rgb(20, 20, 20);
}
.topbar #menus li a{
display: inline-block;
width: 100%;
height: 100%;
margin-bottom: 0;
}
.sub a{
display: inline-block;
width: 100%;
height: 100%;
}
.sub{
display: none;
border: 2px solid black;
}
.topbar #menus li a:hover + .sub{
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Element</title>
</head>
<body>
<div class="topbar">
<ul id="menus">
<li id="food"><a href="food.html">FOOD</a>
<ul class="sub">
<li id="breakfast"><a href="#">BREAKFAST</a></li>
</ul>
</li>
<li id="drinks"><a href="drinks.html">DRINKS</a>
<ul class="sub">
<li id="colddrinks"><a href="#">COLD DRINKS</a></li>
</ul>
</li>
<li id="offers"><a href="offers.html">OFFERS</a>
<ul class="sub">
<li id="foodoffers"><a href="#">FOOD OFFERS</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>