I have a dropdown menu that opens to the left, but it is displaying underneath the content. I attempted adjusting the z-index of the content to 1 and the dropdown to 2, however, this did not resolve the issue.
Here is a sample in jsFiddle: https://jsfiddle.net/dgy95y8q/8/
CSS for navbar when not collapsed:
.navmenu {
width: 0px;
margin-top: 20px;
padding-top: 10px;
padding-bottom: 10px;
background: #fff;
text-align: center;
position: fixed;
left: 180px;
top: 25px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
z-index: 0;
transition: all 300ms ease;
}
After collapsing:
.navmenu.opened {
visibility: visible;
opacity: 1;
width: 240px;
z-index: 1;
}
CSS for the main content wrap:
.main {
float: left;
width: 85%;
background-color: rgb(255,255,255);
position: relative;
z-index: 2;
}