Why does the nested ul element bring down the entire li elements when hovering over one li element

Question

This is a two part question. The first part is my problem when hovering over an li element that is supposed to reveal a nested ul element. It brings the rest of the li tags at the bottom of the nested ul element. I don't know what I'm doing wrong but it pushes the initial li elements downward. I wish someone can explain what I'm doing wrong. Here is the code

The second question I have is how do I create li elements that specificly have a hovering effect on them and not any nested li elements? I wanted to create a menu list that changes the color of the text when you hover over it, but I didn't want the nested li elements to also have the hover effect

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

For problem 1 add vertical-align:top to your li

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

  &:hover ul {
        display: block;
    }
 }

For Problem 2 use child instead of decendant selector. EG:

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

See: http://codepen.io/anon/pen/rrpVaV

Answer 2

First you have used global css for ul under #container #container ul {position:relative;} this css will be apply on every child ul which is in #container , and its overriding .list-inline ul{position:absolute} , you need to set immediate child selector css #container > ul {position:relative;} .

For second ans. you need to do same thing, use immediate child selector css

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

Answer 3

It works well. you have to add width of li

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

And

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

DEMO

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