Why is my image floating above my dropdown menu

Question

I'm trying to figure out why my drop-down nav bar that's titled "players" is going behind my image. I tried setting the z-index of the "top" class to = "2" and my image elements to = "1" but that didn't work.

Is it something involving the absolute positioning? Why isn't my dropdown menu floating above it?

function slow(){
    document.getElementsByClassName("tracy")[0]
    .style.opacity = 0;
    var tracy1 = document.createElement("img");
    tracy1.src = "https://cdn5.kicksonfire.com/wp-content/uploads/2015/08/TRACY-MCGRADY-WAS-IN-CHINA-TO-RE-LAUNCH-THE-ADIDAS-T-MAC-5-4.jpg?x77385";
    tracy1.style.width = "175px";
    tracy1.style.height = "220px";
    tracy1.style.opacity = 0;
    tracy1.style.float = "left";
    tracy1.style.marginLeft = "10px";
    tracy1.className = "fade-img";
    document.getElementsByClassName("img-container")[0]
    .appendChild(tracy1);
    setTimeout(function(){tracy1.style.opacity = 1;},0);
};

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

header, nav, section, aside, footer, article {
  display: block;
}

body {background-image: url(backwood.png);}

.container {
  margin:0 auto;
  background-color: #f7f7f7;
  background-size: cover;
  width: 1300px;
  padding-top:5px;
  height: 100%;
}

header {
  margin:0 0 2px;
  border-bottom: 2px groove #ffae00;
}

header h1 {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 25px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4ca1f;
  background:linear-gradient(to right, #5092f4, #f29641);
}

.nba {margin-right: 10px;}

.thenav {
  background-color: #3b63d3;
  height: 85px;
  opacity: 0.9;
  position: relative;
  border-bottom-radius: 5px;
}

.logo {float: left;}
.top {
  position: relative;
  z-index: 2;
}
.top ul {
  padding: 0;
  margin: 0;
}

.top ul li {
  float: left;
  background-color: #3b63d3;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
  position: relative;
}

.top ul li a {
  display: block;
  color: white;
  font-weight: bold;
  padding: 33px 10px;
}

.top ul li a:hover {
  background-color: #47e586;
  -webkit-transition: all 0.90s;
  -moz-transition: all 0.90s;
  transition: all 0.90s;
}

.top li ul li a {
  padding: 8px;
  text-align:center;
}

.top li ul li{
  background-color: #6db8f2;
  border: 4px groove grey;
  border-radius: 4px;
  opacity: 1;
  background-color:#f76778;
  position: relative;
}
.top li ul li{background-color:#f76778;}
.top li ul li:nth-child(1)  a:hover {background-color: blue;}
.top li ul li a:hover{background-color: red;}

.top ul li ul {display: none;}
.top li:hover ul{position:absolute;}
.top li:hover ul{display: block;}


.userlogin {
  font-size: 12px;
  position: absolute;
  top:2px;
  left: 1330px;
  color: white;
}

input[type=text], input[type=password] {
  font-weight: bold;
  margin: 0;
  font-size: 8px;
  height: 10px;
  padding: 3px 5px;
  color: 162354;
}
	
.stat input[type=button] {
  background-color: #6cd171;
  color: blue;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  float: left;
  margin: 20px 0 0 20px;
  padding: 2px;
  font-family: Verdana, Geneva, sans-serif;
}

.log[type=button] {
  background-color: white;
  color: #008cff;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  padding: 1px 2px 2px 2px;
  position: relative;
  left: 5px;
  top: 3px;
}

.tracy {
  float: left;
  margin: 0 10px;
  position: relative;
}
.img-container{
  float: left;
  height: 220px;
  width: 206px;
  position: relative;
}

.fade-img {
  float: left;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
  -webkit-transition: opacity 2s ease-out;
  -moz-transition: opacity 2s ease-out;
  transition: opacity 2s ease-out;
  transition-delay: 1s;
}

.main {
  background-color: #f7f4f4;
  margin-right: 480px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;	
}

.tmacLogo {
  position: relative;
  top: 12px;
  left: 10px;
}

hr {margin-bottom: 8px;}
.main h1 {
  text-align: center;
  background-color: white;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size:30px;
  letter-spacing: 2.5px;
}
.main p {padding: 2px 5px 0;}

<div class="container">
    <header>
        <h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
        <div class="thenav" onload="changed()">

            <nav class="top">
                <ul>
                    <li><a href="http://www.nba.com"/>Home</a></li>
                    <li onclick="changeP()"><a href="#">About</a></li>
                    <li><a href="#">Players</a>
                        <ul>
                            <li onmouseover="slow()"><a href="#"/>T-Mac <img src="tmaclogo.png" width="10px" height="10px"></a></li>
                            <li><a href="#kobesec"/>Kobe</a></li>
                            <li><a href="#"/>Kevin Durant</a></li>
                            <li><a href="#"/>The Goat</a></li>
                        </ul>
                    </li>
                    <li onclick="slow()"><a href="#">News</a></li>
                </ul>

                <div class="userlogin">
                    <form action="/action_page.php">
                        Username<br>
                        <input type="text" name="User" maxlength="20"/>
                        </br>

                        Password </br>
                        <input type="Password" name="User"/>
                        <input type="button" onclick="x('green','80px')" value="Login" class="log"/> 
                    </form>
                </div>
            </nav>
        </div>
    </header>
		
    <div class="main">
        <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo"/></h1>
        <hr style="color:red;">
        <div class="img-container">
            <img src="http://i.imgur.com/1yiEfva.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img">
        </div>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release </p>       
    </div>	
	
    <div class="stat">
        <input type="button" value="Stats" onclick="newText()">
    </div>
</div>

Here is an image of whats i dont understand:

https://i.sstatic.net/yCoue.jpg

Answer 1

First things first:

• There is no such thing as color: 162354;, the color should be declared in hex (#eeeeee), rgb (rgb(0,0,0)) or rgba (rgba(0,0,0,.7)) format.
• border-bottom-radius: 5px; is invalid as well. It should be border-bottom-left-radius or border-bottom-right-radius or both.
• You cannot put background-color two times for any element including .top ul li ul li. It should be one either background-color: #6db8f2; or background-color:#f76778; or any other color.

I have heavily reformatted your code deleting parts what are not relevant to your issue and commented out all JavaScript. As @LGSon mentioned in comments you have troubles with multiple things, including absolute and relative positioning.

My advice would be that you edit your code part by part, not all together at once. This way you can keep track of what is really happening, and the keep the order as well.

This is not the most elegant solution out there, but it involved formatting your code. Now your dropdown navigation is showing correctly.

/*function slow(){
    document.getElementsByClassName("tracy")[0]
    .style.opacity = 0;
    var tracy1 = document.createElement("img");
    tracy1.src = "https://cdn5.kicksonfire.com/wp-content/uploads/2015/08/TRACY-MCGRADY-WAS-IN-CHINA-TO-RE-LAUNCH-THE-ADIDAS-T-MAC-5-4.jpg?x77385";
    tracy1.style.width = "175px";
    tracy1.style.height = "220px";
    tracy1.style.opacity = 0;
    tracy1.style.float = "left";
    tracy1.style.marginLeft = "10px";
    tracy1.className = "fade-img";
    document.getElementsByClassName("img-container")[0]
    .appendChild(tracy1);
    setTimeout(function(){tracy1.style.opacity = 1;},0);
};*/

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}
header, nav, section, aside, footer, article {
  display: block;
}
.container {
  margin:0 auto;
  background-color: #f7f7f7;
  background-size: cover;
  width: 1300px;
  padding-top:5px;
  height: 100%;
}
header {
  margin:0 0 2px;
  border-bottom: 2px groove #ffae00;
}
header h1 {
  text-align: center;
  padding: 20px 0 25px;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4ca1f;
  background:linear-gradient(to right, #5092f4, #f29641);
}
.thenav {
  background-color: #3b63d3;
  height: 85px;
  opacity: 0.9;
  position: relative;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.nba {margin-right: 10px;}
.top {
  position: relative;
  z-index: 2;
}
.top ul {
  padding: 0;
  margin: 0;
}
.top ul li {
  float: left;
  background-color: #3b63d3;
  width: 90px;
  text-align: center;
  border-right: 1px groove #141e38;
  position: relative;
}
.top ul li a {
  display: block;
  color: white;
  font-weight: bold;
  padding: 33px 10px;
}
.top ul li a:hover {
  background-color: #47e586;
  -webkit-transition: all 0.90s;
  -moz-transition: all 0.90s;
  transition: all 0.90s;
}
.top ul li ul li a {
  padding: 8px;
  text-align:center;
}
.top ul li ul li{
  border: 4px groove grey;
  border-radius: 4px;
  opacity: 1;
  background-color:#f76778;
  position: relative;
}
.top ul li ul li:nth-child(1) a:hover{background-color: blue;}
.top ul li ul li a:hover{background-color: red;}
.top ul li ul {display: none;}
.top ul li:hover ul{
  position:absolute;
  display: block;
}
.main {
  background-color: #f7f4f4;
  margin-right: 0 480px 0 20px;
  box-shadow: 10px 10px 10px #1f2963;
  border-radius: 12px;
  padding-bottom: 20px;
  overflow: auto;
}
.main h1 {
  text-align: center;
  background-color: white;
  padding-bottom: 10px;
  color: #3f3c3c;
  text-shadow: 2px 3px 2px #ff2b4b;
  font-size:30px;
  letter-spacing: 2.5px;
}
.main p {padding: 2px 5px 0;}
.img-container{
  float: left;
  height: 220px;
  width: 206px;
}
.tmacLogo {
  position: relative;
  top: 12px;
  left: 10px;
}
hr {margin-bottom: 8px;}

<div class="container">
    <header>
        <image src="nbaone.png" width="40px" height="55px" class="nba">
        <h1 id="box" onload="changed()">NBA Legends</h1>
        <div class="thenav" onload="changed()">

            <nav class="top">
                <ul>
                    <li><a href="http://www.nba.com"/>Home</a></li>
                    <li onclick="changeP()"><a href="#">About</a></li>
                    <li><a href="#">Players</a>
                        <ul>
                            <li onmouseover="slow()"><a href="#"/>T-Mac <img src="tmaclogo.png" width="10px" height="10px"></a></li>
                            <li><a href="#kobesec"/>Kobe</a></li>
                            <li><a href="#"/>Kevin Durant</a></li>
                            <li><a href="#"/>The Goat</a></li>
                        </ul>
                    </li>
                    <li onclick="slow()"><a href="#">News</a></li>
                </ul>

            </nav>
        </div>
    </header>
		
    <div class="main">
        <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo"/></h1>
        <hr style="color:red;">
        <div class="img-container">
            <img src="http://i.imgur.com/1yiEfva.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img">
        </div>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release </p>       
    </div>	
</div>