为什么嵌套的ul元素在悬停在一个li元素上时会拉下整个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 将应用于#container 中的每个子ul 及其覆盖.list-inline ul{position:absolute}，您需要设置直接子选择器 css #container > ul {position:relative;}.

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

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

Answer 2

对于问题 1 将 vertical-align:top 添加到您的 li

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 3

效果很好。您必须添加 li 的宽度

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

和

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

演示

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