当悬停在一个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