black_yurizan black_yurizan - 2 months ago 6
Sass (Sass) Question

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

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

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

Comments