我如何获得下拉导航以查看内容？

Question

我试图制作下拉内容以克服主页中的所有内容但我不能这样做，我试图将z-index更改为更高但是没有工作（我相信我改错了吗？）也试图改变导航的位置并将内容下载到绝对但也没有工作，任何帮助？
这是我的HTML和CSS文件：

＆＃13;

＆＃13;

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

＆＃13;

<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><a href="" id="Profile">Profile</a></li>
      <li><a href="" id="myConnect">My Connections</a></li>
      <li><a href="" id="allUser">All Users</a></li>
      <li><a href="" id="all_jobs">All Jobs</a></li>
      <li><a href="" id="myMessa">Messages</a></li>
      <li><a href="" id="myNotif">Notifications</a></li>
      <li style="float: right">
        <a href="logout.php" id="logoutt" class="aClass1">Logout</a></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>

＆＃13;

＆＃13;

＆＃13;