html - 一个在不应该移动的时候移动的 img

Question

于是做了一个小网站，发现了一个问题。我在导航中有两个 ul 标签，我在其中放置了几个 li 标签，然后在其中一些 li 标签中放置了一些 ul 标签，我还在另一个 li 的其中一个 li 标签中放置了一个 img。然后，当我应用一些动画时，img 会与其他选项卡一起移动……这里有一些图片；

When nothing is touched with the mouse. Everything looks fine

When I'm hovering over the lock (the img I was walking about) it is moving to the right and showing a logout button

But when I'm dragging this down the lock img is following down.

Here too

这是整个导航栏的代码:

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;和位置:固定；但它没有给我任何积极的结果......

//凯文

Answer 1

请在下面找到完全重写的代码，因为它到处都是，并且不符合标准。请仔细阅读以下代码并查看您哪里出错了，以了解有关 css 的更多信息。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    * {font-family: arial;}
    header {background-color: #2A3943;padding: 10px 40px;box-shadow: 2.5px 2.5px 2.5px #888888;border-radius: 4px;}
    header nav h1 {display: inline-block;color: white;}
    header nav {display: block;}
    header nav ul {list-style: none; padding: 0px;display: block;}
    header nav ul li {position:relative;display: inline-block;border-radius: 2px;cursor: pointer;padding: 22px;background-color: #1AB188;box-shadow: 2.5px 2.5px 2.5px #0d1215;margin:0px 5px;text-align: center;}
    header nav ul li:hover > ul {visibility: visible;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;opacity: 1}
    header nav ul li > ul {background-color:#1AB188;top:60px;visibility: hidden;position: absolute;width: 100%;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;left:0px;opacity: 0;}
    header nav ul li a {text-decoration: none;color: white;display: block;}
    header nav ul li a:hover {color: #333;}
    header nav ul li:last-child {float: right;margin-right: 0px;padding: 20px 0px; background: none;box-shadow: none;}
    header nav ul li:first-child {border-radius: none;padding: 0px;background-color:transparent;box-shadow: none;margin-right: 40px;}
    header nav ul li:nth-child(2) {margin-left: 0px;}
    header nav ul li:last-child > * {display: inline-block;vertical-align: middle;}
    header nav ul li:last-child img {margin-right: 20px;width: 40px;}
    header nav ul li:last-child:hover a button {visibility: visible;transform: translateX(0%);transition-delay: 0s, 0s, 0.3s;opacity: 1}
    header nav ul li a button {padding: 5px;cursor: pointer;background-color: rgba(164, 19, 34, 0);color: #fff;visibility: hidden;transform: translateX(2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;opacity: 0;}
    header nav ul li > ul li {box-shadow: none;background: none;display: block;border-radius: 0px;margin:0px;padding: 21px !important}
    header nav ul li > ul li:last-child {float: none;}
    header nav ul li > ul li:first-child {margin: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<header>
    <nav>

        <ul>
            <li><h1>MemeStagram</h1></li>
            <li><a href="index.php" title="Home">Home</a></li>
            <li><a href="memes.php" title="Memes">Memes</a>
                <ul>
                    <li><a href="most-popular.php" title="Most Popular">Most Popular</a></li><br>
                    <li><a href="newest.php" title="Newest">Newest</a></li>
                    <li><a href="most-viewed.php" title="Most Viewed">Most Viewed</a></li>
                </ul>
            </li>
            <li><a href="about.php" title="About Us">About Us</a></li>
            <li><a href="contact.php" target="Contact">Contact</a>
                <ul>
                    <li><a href="bebin.php" title="Bebin">Bebin</a></li>
                    <li><a href="balbin.php" title="Balbin">Balbin</a></li>
                    <li><a href="bohan.php" title="Bohan">Bohan</a></li>
                    <li><a href="barcus.php" title="Barcus">Barcus</a></li>
                    <li><a href="bonis.php" title="Bonis">Bonis</a></li>
                </ul>
            </li>
            <li><a href="settings.php" title="Settings">Settings</a></li>
            <li class="login"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Simpleicons_Interface_unlocked-padlock.svg/1024px-Simpleicons_Interface_unlocked-padlock.svg.png" alt="Login/Logout"><a href="logout.php" title="logout"><button type="submit">Logout</button></a></li>
        </ul>
    </nav>
</header>
</div>
</body>
</html>

由于您似乎对 css 很陌生，所以我将解释所使用的选择器:

> This selector means "directly inside" so when I put li > ul it means target the UL directly inside an li
* this selector means everything, where I have set everything to have font-famly:arial.
:hover this selector means on hover of the element its attached to, do something
:last-child this selector means the last child of the attached element
:first-child this selector means the first child the attached element

这是一个工作代码笔:https://codepen.io/anon/pen/MrPBEW