CSS hover change other class

Question

Is there a way to change the class of an other object when I hover over an object? A menu-item has to change when I hover over the sub-menu. I have;

ul.menu .menulink {
  padding:0px 13px 0px;
  height:23px;
  font-weight:bold;
  width:auto;
}
ul.menu ul li:hover .menulink{
  color:#002d36;
  background-image:none; 
  background-color:#ffffff;
}

HTML;

<ul class="menu" id="menu">
    <li>
        <a href="#" class="menulink"><span>Main menu item</span></a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

I also tried jQuery;

    $('ul.menu ul li').mouseover(function(){
        $('.menulink').css('color', '#002d36');
        $('.menulink').css('background-color', '#ffffff');
    });
    $('ul.menu ul li').mouseout(function(){
        $('.menulink').css('color', '');
        $('.menulink').css('background-color', '');
    });

But that changes the other main menu items aswell.. Anyone knows how? Thanks in advance!

Answer 1

in css you can't select objects backwards. I wrote yesterday a little script in jq that should help.

$('.menu ul li').hover(function () {
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#002d36');
},
function(){
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#F00');
});

EDIT:

this works fine: http://jsfiddle.net/YBJHP/