我试图弄清楚为什么我的下拉导航栏标题为＆＃34;播放器＆＃34;落后于我的形象。我尝试设置＆＃34; top＆＃34;的z-index。 class to =＆＃34; 2＆＃34;和我的图像元素=＆＃34; 1＆＃34;但那并没有奏效。
是否涉及绝对定位？为什么我的下拉菜单没有浮动在它上面？
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>
这是我不明白的图片：
答案 0 :(得分：1)
首先要做的事情：
color: 162354;这样的东西，颜色应该以十六进制（#eeeeee），rgb（rgb(0,0,0)）或rgba（rgba(0,0,0,.7)）格式声明。< / LI>
border-bottom-radius: 5px;也无效。它应该是border-bottom-left-radius或border-bottom-right-radius或两者。background-color在内的任何元素，您都不能.top ul li ul li两次。它应该是background-color: #6db8f2; 或 background-color:#f76778; 或任何其他颜色。我严重重新格式化了您的代码，删除了与您的问题无关的部分，并注释掉了所有JavaScript。正如@LGSon在评论中提到的那样，你会遇到很多问题，包括absolute和relative定位。
我的建议是，您可以逐个编辑代码，而不是一次编辑代码。通过这种方式，您可以跟踪实际发生的情况，并保持订单。
这不是最优雅的解决方案，但它涉及格式化代码。现在您的下拉导航正确显示。
/*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>