Dropdown menu stuck behind div
Dropdown menu stuck behind div
My dropdown menu is stuck behind my main div or trapped within the header. I have messed with the z-index and that has not helped. How would I be able to tell if it was the header trapping it rather than the main div hiding it.
Here is a pic of the issue:
body {
margin: 0;
font-family: arial;
}
button {
border-style: solid;
border-color: black;
border-radius: 5px;
}
a {
text-decoration: none;
color: blue;
}
#header {
overflow: hidden;
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection {
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.headerSection>.headerItem {
display: table-cell;
vertical-align: middle;
}
#asdf {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover {
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main {
margin-top: 55px;
z-index: 1;
}
☰
OS Information
General Information
Domain Information
Start-Up Command
Shares
Environment Vars
Processes
</div>
</div>
Windows Audit Script Report
Run Time: 2018-06-28 10:11:24.145067
</div>
Does anyone have any ideas on how to fix this issue?
2 Answers
2
The issue is the overflow: hidden
that you have set on the #header. If you remove that the dropdown should work fine.
overflow: hidden
jsfiddle: https://jsfiddle.net/1du6f928/1/
It happens because your header has overflow:hidden you should remove overflow hidden
please check the changes :
body
{
margin: 0;
font-family: arial;
}
button
{
border-style: solid;
border-color: black;
border-radius: 5px;
}
a
{
text-decoration: none;
color: blue;
}
#header
{
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection
{
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.hidden-height-header{width:66%; float:left; height:50px; overflow:hidden}
.hidden-height-header >.headerSection {width:50%}
.headerSection > .headerItem
{
display: table-cell;
vertical-align: middle;
}
#asdf
{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover
{
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main
{
margin-top: 55px;
z-index: 1;
}
<body>
☰
OS Information
General Information
Domain Information
Start-Up Command
Shares
Environment Vars
Processes
</div>
</div>
Windows Audit Script Report
Run Time: 2018-06-28 10:11:24.145067
</div>
</div>
</div></body>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
That worked. I spent a while trying to fix it. Thanks for the fresh pair of eyes!
– Allie Hart
2 days ago