當懸停在一個li元素上時，為什么嵌套的ul元素會降低整個li元素

Question

這是一個兩部分的問題。 第一部分是我將鼠標懸停在應該顯示嵌套ul元素的li元素上時遇到的問題。 它將其余的li標簽帶到嵌套ul元素的底部。 我不知道我在做什么錯，但它會將最初的li元素向下推。 我希望有人能解釋我在做什么錯。 這是代碼

我的第二個問題是如何創建對它們有懸浮效果的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

對於問題1，向您的li添加vertical-align:top

li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;

  &:hover ul {
        display: block;
    }
 }

對於問題2，請使用子代而不是子代選擇器。 例如：

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

請參閱： http ： //codepen.io/anon/pen/rrpVaV

Answer 2

首先，您已經在#container #container ul {position:relative;}下對ul使用了全局css，該css將應用於#container每個子ul ，並且其覆蓋的.list-inline ul{position:absolute} ，您需要設置直接子選擇器css #container > ul {position:relative;} 。

對於第二個ans。 您需要做同樣的事情，使用immediate child selector css

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

Answer 3

它運作良好。 你必須添加寬度li

.list-inline li {
   min-width: 110px;
}

和

.list-inline li:hover ul {
   display: table;
}

演示

 https://codepen.io/Dhaarani/pen/vXpONj