Question

I have some pure CSS navigation I’m working on and I’m trying to get what is currently the “active” state to the hover state. I didn’t write the original code entirely myself, and it’s been somewhat of a time-consuming process reverse-engineering it (the original code was public domain).

I would like it such that the current “active” state (i.e. menu2) is also the hover state, instead of merely changing the background color to be a bit darker.

You can view a demo here.

You can download the source here or view the source from demo above.

_{p.s. I considered posting this on webmasters/programmers/code review but it didn’t seem quite as appropriate as here, since this isn’t asking for a review of my code per se, is a specific rather than a general web question, and is not about programming principles… If I am incorrect, feel free to migrate. 🙂}

Answer 1

This is what you’re after correct?

Demo

Source

Mimic the active state to be triggered by the hover state

the key was this css:

#hNav>ul>li:hover {height:52px;margin:0;padding:0}
#hNav>ul>li:hover>span.o1{background:transparent url('http://i.imgur.com/ax6LZ.png') left top no-repeat;display:block;height:52px}
#hNav>ul>li:hover>span a{background:transparent url('http://i.imgur.com/zapF1.png') right top no-repeat;color:#000;padding:22px 0 0}

_{of course those are the demo urls… replace as needed.}