Question

I create a new site on this domain keksik.com
Here you can see navigation menu at the top.

The problem is that I need the font color of active menu item to be black even when it is not hovered. And the same thing should be applied to parent menu item when I hover on the child item.

So, I think I need to use javascript here to change font color to black dynamically if the menu item has background image.

I tried to add this code to head, but nothing changes:

<script type="text/javascript">

$(document).ready(function(){
    if ($(#top #nav li).css('background') == 'url(images1/mtbg.gif) no-repeat left center') {
    $(#top #nav li a).css('color', 'black');
  }  

});
</script>

So, I hope you can help me with this problem. Thank you in advance.

Answer 1

hmm.. not sure I understand, but maybe something like this would work:

var strBG = "url(images1/mtbg.gif) no-repeat left center";
$("#top #nav li a").live("hover", function(){
    if ($(this).parent().css("background") == strBG)
    {
        $(this).css("color", "black");
        $(this).parent().css("color", "black");
    }
});
$("#top #nav li").live("hover", function(){
    if ($(this).css("background") == strBG)
    {
        $(this).css("color", "black");
        $(this).find("a").css("color", "black");
    }
});