My friend and I are relatively new to the world of coding with HTML, CSS, and a bit of JavaScript. We're currently facing an issue with our dropdown menu implementation. We have created buttons and added a dropdown menu using li and ul elements. Initially, we managed to prevent the dropdown menu from pushing down the content below it, but now we have encountered a problem when hovering over the "Products" button. The background of the dropdown menu blocks the mouseover action, resulting in the highlighted background of the button not showing completely and the hover effect not working on the entire button area.
ul {
text-align: center;
list-style: none;
overflow: hidden:
}
ul li a {
text-decoration: none;
color: red;
text-align: center;
padding: 10px;
font-size: 18px;
float: left;
text-decoration: none;
font-weight: bold;
font-family: Garamond, serif;
}
ul li ul {
display: none;
background-color: blank;
}
ul li a:hover {
color: #fff;
border-radius: 10px;
background-color: blank;
text-decoration: none;
color: rgb(0, 204, 204);
background: rgb(128, 128, 128);
font-weight: normal;
transition: all 0.21s ease-in-out;
}
ul li ul.dropdown {
display: none;
position: absolute;
background-repeat: no-repeat;
height: 0;
transition: all 1s ease-in-out;
}
ul li:hover ul.dropdown {
display: block;
height: 200px;
opacity: 1;
}
.navigation ul {
display: flex;
}<body>
<div class="navigation">
<ul>
<li><a href="#"><span><ion-icon name="home-outline"></ion-icon></span><span> Home</span></a></li>   
<li><a href="#"><span><ion-icon name="information-circle-outline"></ion-icon></span><span> About</span></a></li>   
<li class="pro">
<a href="#"><span><ion-icon name="bar-chart-outline"></ion-icon></span><span> Products ▾ </span></a>   
<ul class="dropdown">
<br>
<li><a href="#"><span>Laptops</span></a></li>
<li><a href="#"><span>Monitors</span></a></li>
<li><a href="#"><span>Printers</span></a></li>
</ul>
</li>
<li><a href="#"><span><ion-icon name="mail-open-outline"></ion-icon></span><span> Contact</span></a></li>
</ul>
</div>
</body>