html - Nested CSS classes in li/ul -

i have nested li , have specific classes. having issues nested classes. despite specific class, styling of class of parent:

<ul>     <li class="navtitle-current"><a href="1.html">one</a>     <ul>     <li class="navtitle-current"><a href="2.html">two</a></li>     <li class="navtitle"><a href="3.html">three</a></li>     </ul>     </li> </ul>  .navtitle {     font-weight: none; }  .navtitle a{     background-color:white;     color: gray; }  .navtitle a:hover, .navtitle:hover{     background-color:white;     color: black; }  .navtitle-current {     font-weight: none; }  .navtitle-current a{     background-color:white;     color: black; }  .navtitle-current a:hover, .navtitle-current:hover{     background-color:white;     color: black; } 

what want happen 1 needs in black, 2 in black , 3 in gray. however, links black.

i under impression if explicitly have class, should not have such issues. have thoughts?

all appreciated.

note: realize css blocks not in . put code on here sake of showing have.

yet way go this:

jsfiddle

.navtitle-current .navtitle   {     background-color:white;     color: gray;  } 

it may personal preference, when possible try avoid chaining ul li ul li etc. find bit more readable use class names.