Question

所以我做了一个小网站，我发现了一个问题。我在导航器中有两个ul标签，其中我放了几个li标签，然后在一些li标签中有一些ul标签我还在另一个li中的一个li标签中放了一个img。当我然后应用一些动画时，img与其他标签一起移动......这是一些图片;

以下是整个导航栏的代码：

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>

我真的很感谢这个问题的帮助。我试图设定位置：绝对;和位置：固定;但它没有给我任何积极的结果......

//凯文

Answer 1

请在下面找到完整的代码重写，因为它遍布整个地方并且与标准不一致。请仔细阅读以下代码并查看出错的地方，以了解有关css的更多信息。

regex

你似乎对css很陌生，我将解释所用的选择器：

^[1-9][0-9]*(,[0-9]{1,3})?$

继承人工作的代码：https://codepen.io/anon/pen/MrPBEW

一个不应该移动的img

1 个答案: