How to make dropdown content get over content? - html

Question

I can't see the contents in dropdown because another content is over them (i have iframe down and it covers the data of dropdown contents), i've tried to change the z-index to bigger values and set the position to relative but none of them works, the data in dropdowns are taken from another file:
#Menu-bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:black;
opacity: 0.7;
filter:alpha (opacity=70);
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
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);
z-index: 200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
z-index: 200;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdownFollowing:hover .dropdown-content {
display: block;
}
<div id="Menu-bar">
<ul>
<li>
<a class="active" href="MainPage.php">
<img src="images/comp4.png" alt="">BIO
</a>
</li>
<li>
<a class="active" id="report-print"></a>
</li>
<li id="dropdownFollowing">
<a class="dropbtn"></a>
<div class="dropdown-content" id="contentFollow"></div>
</li>
<li id="dropdownFollowing">
<a class="dropbtn"></a>
<div class="dropdown-content" id="contentMessages"></div>
</li>
<li id="dropdownFollowing">
<a class="dropbtn" id="notf"></a>
<div class="dropdown-content" id="contentNotifications"></div>
</li>
<li style="float: right">
<img src="images/logout.png" alt="">
</li>
</ul>
</div>

Answer 1

Im not sure exactly what you are trying to do,
but to me it seems you cant see the content of the dropdowns because there is no content in them.
https://jsfiddle.net/0jjdzhm9/
<div id="Menu-bar">
<ul>
<li>
<a class="active" href="MainPage.php">
<img src="images/comp4.png" alt="">BIO
</a>
</li>
<li>
<a class="active" id="report-print"></a>
</li>
<li class="dropdownFollowing">
<a class="dropbtn">test</a>
<div class="dropdown-content" id="contentFollow">test</div>
</li>
<li class="dropdownFollowing">
<a class="dropbtn">test</a>
<div class="dropdown-content" id="contentMessages">test</div>
</li>
<li class="dropdownFollowing">
<a class="dropbtn" id="notf">Test</a>
<div class="dropdown-content" id="contentNotifications">Test</div>
</li>
<li style="float: right">
<img src="images/logout.png" alt="">
</li>
</ul>
</div>
#Menu-bar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:black;
opacity: 0.7;
filter:alpha (opacity=70);
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
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);
z-index: 200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
z-index: 200;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdownFollowing:hover .dropdown-content {
display: block;
}
also changed the #dropdownFollowing selector to a class (.dropdownFollowing:hover) as you have more than one using it.