Having created a navigation bar with dropdown menu items that reveal on hover, I encountered an issue. Below the navigation bar lies a slideshow of images. Whenever I hover over the dropdowns, the slideshow div obstructs the view, making it impossible to see the dropdown menus. https://i.sstatic.net/LlU2e.jpg
This is the HTML code I currently have:
<div class="dropdown">
<li class="dropbtn">About Us</li>
<div class="dropdown-content">
<a href="#"> Overview and History</a>
<a href="#">Vision</a>
<a href="#">Objectives</a>
<a href="#">Organization</a>
<a href="#">About NEU</a>
</div>
</div>
Here is the corresponding CSS:
.dropbtn {
background-color: inherit;
color: black;
padding: 12px;
font-size: 20px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
margin: 0;
padding: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #0099ff;
}