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:



Stuck dropdown




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;
}


Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Export result set on Dbeaver to CSV

Opening a url is failing in Swift