After creating a gallery page to showcase website images, I encountered an issue where the images overlapped with the drop-down boxes of my navigation bar. Unfortunately, this means that I am unable to click on the drop-down boxes in order to navigate to other pages. Is there a method to prioritize the drop-down boxes over the images so that they function properly? Below is the code snippet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #788bc8;
min-height: 100vh;
overflow-x: hidden;
}
span {
color: white;
}
.navbar {
background-color: #d0f0c0;
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3%;
}
.logo {
font-size: 45px;
}
.logo a {
color: red;
text-decoration: none;
}
.navbar ul {
display: flex;
list-style-type: none;
}
.navbar ul li {
padding: 10px 25px;
position: relative;
}
.navbar ul li a {
color: black;
text-decoration: none;
font-size: 22px;
transition: all 0.2s;
}
.fas {
float: right;
margin-left: 10px;
padding-top: 3px;
}
.navbar ul li a:hover {
color: #4dac62;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul {
display: block;
margin: 10px;
text-align: center;
}
.navbar ul li :where(.dropdownda, .dropdownfa) ul li {
width: 200px;
padding: 10px;
}
.dropdownda,
.dropdownfa {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #d0f0c0;
}
.navbar > ul > li:hover :where(.dropdownda, .dropdownfa) {
display: block;
}
.main {
position: relative;
justify-content: center;
align-items: center;
margin-top: 10px;
width: 100vw;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
column-gap: 10px;
row-gap: 10px;
padding: 10px 0px;
}
img {
width: 300px;
height: 300px;
object-fit: cover;
object-position: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Be Aware - First Response</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</head>
<body>
<div class="navbar">
<h1 class="logo">
<a href="home.html">BE <span>AWARE</span></a>
</h1>
<ul>
<li>
<a href="#">Drug Advocacy <i class="fas fa-caret-down"></i></a>
<div class="dropdownda">
<ul>
<li><a href="dAwareness.html">Drug Awareness</a></li>
<li><a href="dTypes.html">Types of Drugs</a></li>
<li><a href="aAndp.html">Abuse and Prevention</a></li>
</ul>
</div>
</li>
<li>
<a href="#">First Aid <i class="fas fa-caret-down"></i></a>
<div class="dropdownfa">
<ul>
<li><a href="faExplain.html">Explaining First Aid</a></li>
<li><a href="faPurpose.html">Purpose of First Aid </a></li>
<li><a href="faKit.html">First Aid Kit</a></li>
</ul>
</div>
</li>
<li><a href="cause.html">Our Cause</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
</div>
<div class="main">
<img src="img1.png" alt="" />
<img src="img2.png" alt="" />
<img src="img3.jpg" alt="" />
<img src="img4.png" alt="" />
</div>
</body>
</html>The images may not be visible within the snippet, however, you can observe how the drop-down box gets hidden behind the image placements. Even applying the !important rule to the drop-down boxes did not resolve the issue.