Although I have been learning HTML, CSS and jQuery, one area that always trips me up is selectors. Currently struggling with redundant selectors.
I am attempting to customize the ul and li elements after collapsing the li, however, the selector doesn't seem to be functioning as expected.
- Any suggestions on how to rectify this? Shouldn't the .colapsed selector override the other selectors?
http://jsfiddle.net/jcml/bby7522h/
<div class="menu m1 corner">
<div class="links">
<ul>
<li class="toSub colapsed" data-open=".m3">Architecture
<ul>
<li class="toSlide" data-open=".s1">bla</li>
<li class="toSlide" data-open=".s2">bla</li>
<li class="toSlide" data-open=".s3">bla</li>
<li class="toSlide" data-open=".s4">blablablablablabla</li>
</ul></li>
<li class="toSub" data-open=".m4">Coding</li>
<li class="toSlide" data-open=".s5">bla</li>
<li class="toSlide" data-open=".s6">bla</li>
<li class="toSlide" data-open=".s7">bla</li>
<li class="toSlide" data-open=".s8">blablablablablabla</li>
<li class="toSub" data-open=".m5">Thesis</li>
<li class="toSlide" data-open=".s9">bla</li>
<li class="toSlide" data-open=".s10">blablablablablabla</li>
</ul>
</div>
</div>
ul {
padding: 0;
margin: 0;
}
.menu > .links {
font-family: 'Montserrat', sans-serif;
font-size: 2em;
font-weight: 500;
text-align: center;
text-transform: uppercase;
height: 100%;
}
.links ul {
position: relative;
}
.menu li {
list-style: none;
display: table;
position: relative;
left: 50%;
padding: 15px;
margin: 5px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.menu li, a{
cursor: pointer;
color: rgba(255,255,255,.75);
-webkit-transition: all ease .75s;
-moz-transition: all ease .75s;
-ms-transition: all ease .75s;
-o-transition: all ease .75s;
transition: all ease .75s;
text-decoration: none;
}
.menu li:hover, .menu a:hover {
color: rgba(255,255,255,1);
}
.colapsed .ul .li {
color: black;
font-size: .1em;
padding: 0px;
margin: 0px;
}