html - 为什么当将鼠标悬停在一个 li 元素上时，嵌套的 ul 元素会拉下整个 li 元素

Question

这是一个由两部分组成的问题。 第一部分 是我将鼠标悬停在应该显示嵌套 ul 元素的 li 元素上时遇到的问题。它将其余的 li 标签带到嵌套的 ul 元素的底部。我不知道我做错了什么，但它会将最初的 li 元素向下推。我希望有人能解释我做错了什么。 Here is the code

第二个问题 我的问题是如何创建专门对其具有悬停效果的 li 元素，而不是任何嵌套的 li 元素？我想创建一个菜单列表，当你将鼠标悬停在它上面时它会改变文本的颜色，但我不希望嵌套的 li 元素也有悬停效果

HTML

<div id="container">

  <ul class="list-inline">
    <li><a href="">Fire</a>
        <ul>
          <li><a href="">charmander</a></li>
          <li><a href="">magmar</a></li>
          <li><a href="">vulpix</a></li>
        </ul>
    </li>
    <li><a href="">Grass</a>
        <ul>
          <li><a href="">bulbasaur</a></li>
          <li><a href="">bellsprout</a></li>
          <li><a href="">oddish</a></li>
        </ul>
    </li>
    <li><a href="">Electric</a>
        <ul>
          <li><a href="">pichu</a></li>
          <li><a href="">magneton</a></li>
          <li><a href="">voltorb</a></li>
        </ul>
    </li>
    <li><a href="">Water</a>
        <ul>
          <li><a href="">squirtle</a></li>
          <li><a href="">poliwag</a></li>
          <li><a href="">krabby</a></li>
        </ul>
    </li>

  </ul>

</div>

SCSS

$green: #33cc33;
$blue : #0099ff;
$yellow: #ffcc00;
$red: #ff3333;
@mixin secondUl($color) {
        li {
            color: white;
            background: $color;
            min-width: 100px;
            border-bottom: 1px solid white;
        }
        a {
            color: white;
            font-weight: normal;
            text-align: center;
            display: block;
            width:100% ;
            padding: 5px 0;
        }
    } //secondUl

#container {
    width: 600px;
    margin: auto;
    margin-top: 30px;
    border-top: 1px solid black;
    color: black;
    font-family: arial,
    sans-serif;


    ul {


        margin: 15px 0;
        position: relative;

    } //ul
} //container

.list-inline {
    ul {
        position: absolute;
        padding: 0;
        top: 0;
        left: -25% ;
        z-index: 2;
        display: none;
        li {
            display: inherit;
            min-width: 100px;
            margin: 0;
        } //li
    } //ul

    li:nth-of-type(1) ul {
        @include secondUl($red);
    }

    li:nth-of-type(2) ul {
        @include secondUl($green);
    }

    li:nth-of-type(3) ul {
        @include secondUl($yellow);
    }
    li:nth-of-type(4) ul {
        @include secondUl($blue);
    }

    li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      &:hover ul {
            display: block;
        }
    } //li 

     li:nth-child(1) a:hover {
        color: $red;
    }

     li:nth-child(2) a:hover {
        color: $green;
    }

    li:nth-child(3) a:hover {
        color: $yellow;
    }

    li:nth-of-type(4) a:hover {
        color: $blue;
    }


    &:first-child a {
        text-decoration: none;
        color: black;
        text-transform: capitalization;
        font-weight: 600; 
        -webkit-transition: color 1s;
        transition: color 1s; 
        -moz-transition: color 1s;

    }
}//list-inline

Answer 1

首先，您在#container #container ul {position:relative;} 下为 ul 使用了全局 css，此 css 将应用于每个子 ul 位于 #container 中，它覆盖 .list-inline ul{position:absolute}，您需要设置直接子选择器 css #container > ul {position:relative;}.

第二个答案。你需要做同样的事情，使用 immediate child selector css

http://codepen.io/anon/pen/LRZVRO