Problem: i am building a webpage and learning to use grids with CSS.
But i am running into a problem with it, as the dropdown menu i have at the top of the page, goes BEHIND the grid-items.
i’ve tried using the z-index: -1; and z-index:1; on just about every block there is regarding both the menu and the grid.
But so far have been unsuccesfull.
So here i am.
How do i do this??
A fiddle to see my "problem"
Here is a FIDDLE of the problem.
it might just be me which is missing something obvious, but i am still learning 😀
.grid-container {
display: grid;
grid-template-columns: 350px 350px 350px;
justify-content: center;
}
.grid-item {
position: relative;
border: 2px solid rgb(13, 7, 95);
margin: 5px;
padding-left: 20px;
font-weight: bold;
}
.menu-bar {
border-radius: 25px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: inline-flex;
background-color: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
align-items: center;
padding: 0 10px;
margin: 50px 0 0 0;
}
.menu-bar li {
list-style: none;
color: white;
font-family: sans-serif;
font-weight: bold;
padding: 12px 16px;
margin: 0 8px;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.menu-bar li::before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: 0.2s;
border-radius: 25px;
}
.menu-bar li:hover {
color: black;
}
.menu-bar li:hover::before {
background: linear-gradient(to bottom, #e8edec, #d2d1d3);
box-shadow: 0px 3px 20px 0px black;
transform: scale(1.2);
}
ul {
list-style-type: none;
margin: 10px;
padding: 10px;
}
li {
float: center;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}<ul class="menu-bar">
<li class="dropdown">
<p>Test 1</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 2</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 3</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 4 </p>
</li>
<li class="dropdown">
<p>Test 5 </p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
</ul>
<div class="grid-container">
<div class="grid-item">
<p> hello world </p>
</div>
</div>>Solution :
Remove position: relative from .grid-item:
.grid-container {
display: grid;
grid-template-columns: 350px 350px 350px;
justify-content: center;
}
.grid-item {
border: 2px solid rgb(13, 7, 95);
margin: 5px;
padding-left: 20px;
font-weight: bold;
}
.menu-bar {
border-radius: 25px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
display: inline-flex;
background-color: rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
align-items: center;
padding: 0 10px;
margin: 50px 0 0 0;
}
.menu-bar li {
list-style: none;
color: white;
font-family: sans-serif;
font-weight: bold;
padding: 12px 16px;
margin: 0 8px;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.menu-bar li::before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: 0.2s;
border-radius: 25px;
}
.menu-bar li:hover {
color: black;
}
.menu-bar li:hover::before {
background: linear-gradient(to bottom, #e8edec, #d2d1d3);
box-shadow: 0px 3px 20px 0px black;
transform: scale(1.2);
}
ul {
list-style-type: none;
margin: 10px;
padding: 10px;
}
li {
float: center;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}<ul class="menu-bar">
<li class="dropdown">
<p>Test 1</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 2</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 3</p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
<li class="dropdown">
<p>Test 4 </p>
</li>
<li class="dropdown">
<p>Test 5 </p>
<div class="dropdown-content">
<p> test 1 </p>
<p> test 2 </p>
<p> test 3 </p>
<p> test 4 </p>
</div>
</li>
</ul>
<div class="grid-container">
<div class="grid-item">
<p> hello world </p>
</div>
</div>