Почему вложенный элемент ul уничтожает все элементы li при наведении на один элемент li

Question

Это вопрос из двух частей. Первая часть - это моя проблема при наведении на элемент li, который должен отображать вложенный элемент ul. Он возвращает остальные теги 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

Сначала вы использовали глобальный CSS для ul под #container #container ul {position:relative;} этот CSS будет применяться на каждом ребенке ul, который находится в #container, и его главная .list-inline ul{position:absolute}, что вам нужно set direct child selector 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 используйте ребенка вместо декантированного селектора. EG:

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

См: http://codepen.io/anon/pen/rrpVaV

Answer 3

Он хорошо работает. Вы должны добавить ширину от литий

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

И

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

DEMO

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