Problem with hover un a accordion menu title

[lriera]

Hi all,

This is my first time on the Forum. I have been playing with CSS for a little time and this is my first time with Scripting. I have downloaded the code for the accordion menu and I have done this you can see here: http://81.19.107.129/novintethical2/index.html

My question is: How can I change the hover color state of the 1st and 2nd menu levels (as I have done with the third ones and the rest of the menu items)? I have been fighting with this for two days... and have found no way...

Can someone help me please?

Thank you a lot. Bye.

Lluís

[azoomer]

Hi lriera, I don't understand exactly what you want to change. If you could give an example with the name of a menu point that you need to change ( e.g. Gastrointestinal Tract) and what color you want on hover i could look into it later today.

[lriera]

Hi Azoomer,

What I am trying to do with Products is that it reacts to a a:hover like the rest of 1st level menu items, changing the background and type color. Now, if you pass the cursor over the menu, all menu items change background and type color but the Products menu item.

And the same for the 2ond menu level above Products. When you clic on Products you get a 4 menu items list and they also don't react to the cursor. I need there a a:hover working.

For the 3rd Products menu level, I have changed the properties and it works Ok.

Thank you a lot for your attention.

[azoomer]

Hi lriera. I have been trying to find a way to make the hover effect that you want, but I'm sorry to disappoint you. I just can't figure it out. It is made in a way that makes it difficult to access the background and text color for these elements individually. I can understand why you didn't succeed also. We have to hope for a css/javascript-ninja coming to the rescue.

[lriera]

Hi Azoomer,

Thank you a lot for your attention!!

It is very difficult for me too, first timer, to imagine what can I do. I have resolved the issue with the 3rd level very easy, but for the 1st and 2nd I can't find a way.

So here we are waiting for a very savy expert...

Any way, thank you very much.

Best regards.

[azoomer]

Hi lriera. I couldn't leave it. Maybe this can get you closer:

<script type="text/javascript">
$(document).ready(function(){
$('.arrowlistmenu p:first,.arrowlistmenu div').hover(function() {
$(this).css({
			'background-color':'#C3D8F0',
			'color':'#5972B2'
			});
}, function() {
$(this).css({
			'background-color':'#5972B2',
			'color':'#FFFFFF'
			});
});
});
</script>

If you paste it in your code in the head section right above </head>. Try it !

Best regards

[lriera]

Yeeees!! This is EXACTLY what I was looking for... Youuu are the css/javascript-ninja master!!

TANK YOU very much.

Best regards.