Unordered list and highlighting 'active page' - rant/help

[Levi]

Ok so I'm doing my new website and something I thought would be fairly simple is turning out to be completely annoying/stupid/pita.
I'm using unordered lists to create my menu, menu layout works fine, links all work etc etc
Start styling it up and get it working fine for hover using the ul li a:hover and setting a background colour. Thought highlighting the 'active page' would work the same way using ul li a:active but no.... this doesn't work like the other selectors when used with unordered lists, it works fine with normal links :angry:
So seeing as I want to highlight some anchor links which are also in a unordered list I now need to figure out some work around so if anyone wants to suggest anything would be greatly appreciated.
I've found a jquery/javascript script for the anchor list and I know I can add a class to the menu to 'highlight' the required background but seriously this is what :active is for so it's got to be easier than me needing to use javascript or additional markup!!!!

 

[Sean Lee-Amies]

:active is used to apply styling to an element that is being clicked on, not to style the currently active page.
If you want to style the link for the current page, just add a class to the li such as:
li class="active" { color: #0f0; }
<div>
<ul>
<li class="active">link></li>
<li>link></li>
<li>link></li>
</ul>
</div>

 

[Levi]

See thats where I differ in opinion, active means thats where I am, :focus should highlight the link on click (like it does on contact forms)
And that 'class' is how I found I need to fix my main navigation, doesn't work for anchor text menu on the same page... see stupid semantics, using 'active' in the 'right' way would have covered both these issues without needing extra markup or javascript :angry:

 

[Sean Lee-Amies]

Well, you can argue with W3C's definition all you want, but it's not going to change how it behaves!
Seriously though, adding that tiny bit of extra CSS isn't going to hurt anyone or anything! If you need some more help with it, put a link up to the test page and I'll have a look.

 

[Levi]

ok.... anyone got any decent tutorials or scripts (ideally with smoothscroll) to do the damned sub-menu highlights.... main menu, piece of cake, sub menu it's just not going anywhere, waypoints.js has pretty much zero info as to how to get that working lol
I know I need jquery, I know I need waypoints.js, I know I need waypoints to change the class of the sub-menu li but I'm just not getting anywhere.... javascript, I just hate the stuff or it hates me, I haven't quite decided....