【发布时间】：2018-06-26 06:26:12
【问题描述】：
所以我做了一个小网站，我发现了一个问题。我在导航中有两个 ul 标签，我在其中放入了几个 li 标签，然后在其中一些 li 标签中放入了一些 ul 标签，我还在另一个 li 中的其中一个 li 标签中放入了 img。然后，当我应用一些动画时，img 会随着其他选项卡一起移动……这里有一些图片；
When nothing is touched with the mouse. Everything looks fine
But when I'm dragging this down the lock img is following down.
这里是整个导航栏的代码：
body{
margin-left: 10px;
padding: 10px;
font-family: arial;
background-color: #E9EBEE !important;
}
nav {
margin-top: -10px;
height: 80px;
background-color: #2A3943;
padding: 5px;
box-shadow: 2.5px 2.5px 2.5px #888888;
border-radius: 4px;
z-index: 1;
}
nav h1 {
color: white;
margin-left: 20px;
}
nav ul {
margin-left: 27%;
list-style: none;
margin-top: -55px;
}
nav ul li {
border-radius: 2px;
float: left;
cursor: pointer;
margin-left: 5px;
display: inline;
padding: 21.5px;
background-color: #1AB188;
transition: all .5s ease;
box-shadow: 2.5px 2.5px 2.5px #0d1215;
}
nav ul li:hover {
box-shadow: 5px 5px 5px #0d1215;
}
nav ul li#pleb {
height: 19px;
}
nav ul li#pleb ul {
margin-top: -80px;
opacity: 0;
transition: all .5s ease;
}
nav ul li#pleb:hover ul {
opacity: 1;
margin-top: 30px;
}
nav ul li#pleb:hover {
height: 290px;
}
nav ul li:hover {
background-color: #179E79;
}
nav ul li ul.dropdwn li {
display: none;
margin-top: 20px;
margin-left: -90px;
}
nav ul li:hover ul.dropdwn li {
display: block;
}
nav ul li ul li:hover {
background-color: #2A3943;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li#fort {
height: 19px;
}
nav ul li#fort:hover {
height: 400px;
}
nav ul li#fort ul {
margin-left: -50px;
margin-top: -300px;
opacity: 0;
transition: all .5s ease;
}
nav ul li#fort:hover ul {
margin-top: 20px;
opacity: 1;
}
nav ul li#fort ul.drpdown li {
display: none;
margin-top: 10px;
}
nav ul li#fort:hover ul.drpdown li {
display: block;
}
nav .login ul {
list-style: none;
margin-top: 0px;
border-color: none;
}
nav .login ul li {
background-color: rgba(38, 181, 150, 0);
box-shadow: none;
margin-top: -80px;
margin-left: 770px;
transition: all .5s ease;
}
nav .login ul li:hover {
transform: translateX(-100px);
}
nav .login ul li img {
width: 40px;
}
nav .login ul li img:hover {
transform: none;
}
nav .login ul li ul li {
display: none;
margin-left: -30px;
margin-top: -60px;
transition: none;
background-color: rgba(119, 221, 110, 0);
}
nav .login ul li ul li#signup {
position: absolute;
margin-left: 20px;
margin-top: -60px;
}
nav .login ul li ul li#logout {
margin-left: -10px;
}
nav .login ul li:hover ul li {
display: block;
transform: none;
}
nav .login ul li ul li button {
border: none;
padding: 5px;
cursor: pointer;
background-color: rgba(164, 19, 34, 0);
color: #fff;
transition: all .5s ease;
}
nav .login ul li ul li button:hover {
background-color: #1AB188;
padding: 10px;
}
nav .login ul li ul li#signup button {
width: 80px;
}<nav>
<h1>MemeStagram</h1>
<ul>
<li><a href="index.php">Home</a></li>
<li id="pleb"><a href="memes.php">Memes</a>
<ul class="dropdwn">
<li><a href="most-popular.php">Most Popular</a></li><br>
<li><a href="newest.php">Newest</a></li><br>
<li><a href="most-viewed.php">Most Viewed</a></li>
</ul>
</li>
<li><a href="about.php">About Us</a></li>
<li id="fort"><a href="contact.php">Contact</a>
<ul class="drpdown">
<li><a href="bebin.php">Bebin</a></li><br>
<li><a href="balbin.php">Balbin</a></li><br>
<li><a href="bohan.php">Bohan</a></li><br>
<li><a href="barcus.php">Barcus</a></li><br>
<li><a href="bonis.php">Bonis</a></li>
</ul>
</li>
<li><a href="settings.php">Settings</a></li>
</ul>
<div class="login">
<ul>
<li><img src="img/unlock.png">
<ul>
<li id="logout">
<a href="logout.php"><button type="submit">Logout</button></a>
</li>
</ul>
</li>
</ul>
</div>
</nav>非常感谢您在此问题上的帮助。我试图设置 position: absolute;和位置：固定；但它并没有给我任何积极的结果......
//凯文
【问题讨论】：
-
总体而言，这是一种可怕的格式化代码和样式。我将为您重建导航。给我一些时间。