Font does not change color upon select - css

Question

Please check out my fiddle:
http://jsfiddle.net/zzh0ym2m/1/
Once I click on a menu button "Home", "Settings", and so on, the font should be changing to white, but it doesn't. I cannot figure out where the error is located, after trying to change stuff around. It should be turning white:
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedorange {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#fdc652, #dba439)
}

Answer 1

It seems that this
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
is overriding any other settings.
So you need to address that..perhaps with
.topmenu-ul > [class*=topmenu-selected] > a{
color: #fff;
}
That said, there is some repetition and very specific selectors in your CSS that could be tidied up that might make it simpler.
JSFiddle Demo