This problem is doing my head in! In one of my menus, I have succeeded in 'current' highlighting for child menu items, but I can't seem to get the parent to style when the child is the current page. Here is the html code for the parent (taken from the source so you can see the output): <div id="s5_accordion_menu"><div class="menu"> <h3 class="s5_am_toggler active"> <span class="s5_accordion_menu_left" /> <a class="mainlevel" href="/euro/index.php/Products/VoIP-Gateway.html"> <span>VOIP GATEWAY</span></a></h3> Code (markup): I've tried styling in the css #s5_accordion_menu h3.s5_am_toggler Code (markup): but it's a no go. Let's say the following is the (working) styling for the hover effect: #s5_accordion_menu h3.s5_am_toggler:hover {background: #A9AE9A;} Code (markup): How can I apply the same when that parent's child is the current? I can see it is cosidered active as it has the active class as well as the s5_am_toggler one. (I'm trying to change the background color and link color) Can any one make sense of this? nothing i do takes affect on this parent item when it is active. Thank you in advance guys, i'm really in a bind here.
If you mean that you want to change the background color of the menu [or tab] when it is being clicked [or active and its content are being displayed], and if you are using jQuery accordion then you can use combination of CSS and Javascript... So here is the CSS and jQuery function CSS .active-menu {background: #A9AE9A; } Code (markup): jQuery $("#s5_accordion_menu .menu").click(function() { $(this).addClass("active-menu"); }); Code (markup): If you mean that each of the menu buttons loads different pages, then this whole thing has to be done with a little of PHP and jQuery! Tell me what you need! I will code the PHP if you want [Free of course ]
Thank you for the reply! I've managed to actually style the menu tabs when they are clicked/current. Let's say this is the menu structure: Parent A - Child - Child - Child Parent B - Child - Child etc. Changing the children when they are clicked is not a problem for me. I want to achieve the following: When viewing one of the children of Parent A, I'd like that parent to be styled in a certain way. The question is, if i have the following code output in html (that's the active parent btw): <h3 class="s5_am_toggler active"> the active class is assigned to whomever the active parent is when i am viewing the child. How do I style that h3 tag in css? I know I have 2 classes in there - 's5_am_toggler' and 'active' Do I really need a JQuery function or am I missing somethingin the css?
In that case, code it just like this: In case they are not showing up, use !important tag.. Say And you don't need to use jQuery if you are not using it already!
I've done just that, and now I've tried it again and still it doesn't work, even with !important to bypass any inline style...No idea why. Thank you for trying to help, think it's time to bash the screen in...that usually fixes stuff, right?