Issue
I have a problem with dropdown menu not overlapping with main body section. It goes under it. I played around with css positioning and zindex values but still no luck. Here is the link for my codepen https://codepen.io/asgg2/pen/zYWbxGO
Here is html:
<nav class="subnav">
<div class="subnav-wrapper">
<ul class="subnav-items">
<li>nav 1</li>
<li>nav 2</li>
</ul>
<details class="subnav-paddle">
<summary></summary>
<div class="dropdown-men">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</details>
</div>
</nav>
<main class="main">
<h1>hi</h1>
</main>
Here is css:
.subnav {
height: 116px;
padding: 8px;
background-color: hsl(0deg 0% 0%);
color: white;
overflow: hidden;
margin-bottom: 12px;
}
.subnav-wrapper {
position: relative;
}
.subnav-items {
display: flex;
justify-content: center;
list-style: none;
white-space: nowrap;
/* overflow-x: auto; */
overflow-y: hidden;
width: auto;
}
.subnav-paddle {
font-size: 17px;
line-height: 1.8;
font-weight: 300;
letter-spacing: 0em;
background-color: black;
border-left: 1px solid #d2d2d7;
border-radius: 0;
top: 0;
bottom: 0;
color: #f5f5f7;
text-align: center;
position: absolute;
opacity: 1;
width: 33px;
right: 0;
padding-top: 28px;
padding-left: 4px;
}
.dropdown-menu {
position: absolute;
/* top: 100%; */
z-index: 2;
width: 160px;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 2px;
list-style: none;
background-color: #06c;
border: 1px solid greenyellow;
border-radius: 6px;
box-shadow: #d2d2d7;
right: 0;
left: auto;
}
My real design looks like this https://imgur.com/a/FF5JZqc
Please save me!
Solution
first your parent nav class have a limited height, then the wrapper underneath of it which is the subnav- wrapper are positioned relative, so your child element will folow the parent element no matter how z-index you have. so positioning your wrapper on absolute position is the answer I came up since your nav have a designated height. Play with the code below for you working sample. Let me know.
* {
background-color: gray;
}
.subnav {
height:116px;
padding: 8px;
background-color: hsl(0deg 0% 0%);
color: white;
overflow: hidden;
margin-bottom: 12px;
}
.subnav-wrapper {
position: absolute;
width:90vw;
}
.subnav-items {
display: flex;
justify-content: center;
list-style: none;
white-space: nowrap;
/* overflow-x: auto; */
overflow: auto;
width: auto;
z-index:3;
}
.subnav-paddle {
font-size: 17px;
line-height: 1.8;
font-weight: 300;
letter-spacing: 0em;
background-color: black;
border-left: 1px solid #d2d2d7;
border-radius: 0;
top: 0;
bottom: 0;
color: #f5f5f7;
text-align: center;
position: absolute;
opacity: 1;
width: 33px;
right: 0;
padding-top: 28px;
padding-left: 4px;
}
.dropdown-menu {
position: absolute;
/* top: 100%; */
z-index: 2;
width: 160px;
padding-top: 4px;
padding-bottom: 4px;
margin-top: 2px;
list-style: none;
background-color: #06c;
border: 1px solid greenyellow;
border-radius: 6px;
box-shadow: #d2d2d7;
right: 50px;
left: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="subnav">
<div class="subnav-wrapper">
<ul class="subnav-items">
<li>nav 1</li>
<li>nav 2</li>
</ul>
<details class="subnav-paddle">
<summary></summary>
<div class="dropdown-menu">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</details>
</nav>
<main class="main">
<h1>hi</h1>
</main>
</body>
</html>Answered By - Crystal
