how can i get drop down nav to go over content? - html

Question

i'm trying to make the drop down content to get over all the content in the home page but i can't do that, i've tried to change the z-index to higher but didn't work(i believe i'm changing the wrong ones?) also tried to change position of the nav and drop down content to absolute but also didn't work , any help?
this is my HTML and CSS files :
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: 9999;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
position: absolute;
display: block;
text-align: left;
z-index: 9999;
}
body {
background: url(https://static.wixstatic.com/media/516d2c_c88a595abc2846c5bf03bfa9bfa5182a.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
#Menu-bar ul {
position: fixed;
TOP: 0px;
Left: 0px;
list-style-type: none;
margin: 0px;
overflow: hidden;
background-color: black;
opacity: 0.7;
filter: alpha (opacity=70);
z-index: 2;
}
#fix {
position: relative;
z-index: 9999;
}
nav {
background: #000000;
height: 80px;
width: auto;
margin-left: -10px;
line-height: 0px;
position: fixed;
}
.fixed {
position: fixed;
}
.nav>li>a {
text-decoration: none;
color: #ffffff;
}
.nav>li>a>img {
width: 300px;
height: 300px;
float: left;
padding: 0px;
}
.nav>li>a:hover {
color: #5F0500;
}
#wdt {
resize: none;
height: 80px;
width: 529px;
}
.middlecone {
float: right;
margin-left: 0px;
width: 100%;
height: 72%;
}
.nwsf {
text-align: right;
position: absolute;
height: 100%;
width: 50%;
float: right;
}
.box {
color: white;
border: 2px solid black;
float: left;
background-color: black;
opacity: 0.7;
filter: alpha (opacity=70);
}
#middlec {
position: absolute;
TOP: 130px;
LEFT: 380px;
height: 400px;
width: 590px;
border: 3px white solid;
overflow-x: scroll;
overflow-y: scroll;
background-color: #ffb84d;
text-align: left;
margin-top: 0px;
border-radius: 10px;
}
.jti {
height: 15%;
width: 99%;
border-radius: 3px;
margin-bottom: 1%;
text-align: left;
}
.jtiiii {
position: absolute;
TOP: 80px;
LEFT: 10px;
height: 400px;
width: 365px;
background-color: Orange;
float: right;
overflow: scroll;
}
#myMes {
display: none;
border: 1px solid;
float: right;
position: absolute;
margin-left: 78%;
background-color: #F5F5DC;
z-index: 9999;
}
#myNo {
display: none;
border: 1px solid;
float: right;
position: absolute;
margin-left: 105%;
background-color: #F5F5DC;
}
#jtiy {
text-align: center;
}
a.perss {
font-weight: inherit;
color: blue;
font-size: 13px;
text-decoration: underline;
}
<div id="fix">
<div id="Menu-bar">
<ul class="nav">
<li>
<a href="" id="homes"><img src="img/computer.png" style="position:absolute;
TOP:0px;LEFT:0px;height: 40px;width : 40px;">
</a>
</li>
<li>Profile</li>
<li>My Connections</li>
<li>All Users</li>
<li>All Jobs</li>
<li>Messages</li>
<li>Notifications</li>
<li style="float: right">
Logout</li>
</ul>
</div>
</div>
<br>
<div class="middlecone">
<div class="nwsf">
<div id="coun"></div>
<div class="jti">
<div id="myConn">
<ul id="myConn2">
</ul>
</div>
<div id="myMes">
<ul id="myMes2">
<li>1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
</ul>
</div>
</div>
<form name="newsfeedForm" metho="POST" style="position:absolute;
TOP:50px;LEFT:405px;height: 30px;width : 70px;">
<textarea id="wdt" type="text" name="po" placeholder="What do you think?"></textarea>
<input type="hidden" name="post_type" value="add_post">
<button type="submit" style="position:absolute;
TOP:10px;LEFT:550px;height: 50px;width : 90px;background-color: rgb(255, 165, 0);color: white;border: none;">share</button>
</form>