CSS hover change to another class

Question

Is there a way to change the class of another object when hovering over an object? The menu item should change when I hover over a submenu. I AM:

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 it also changes the other main menu items. Does anyone know how? Thanks in advance!

Answer 1

in css you cannot select objects back. I wrote a little script in jq yesterday 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 great: http://jsfiddle.net/YBJHP/

Answer 2

I don't think this is possible using pure CSS. I recommend using jQuery. You can do this very easily with jQuery:

  $('.menulink').hover( 
    function(){
      $(this).css('background-color', '#New-Color-In-HEX');
    },
    function(){
      $(this).css('background-color', '#Old-Color-In-HEX');
    }
  );

Answer 3

css. , css. suckerfish:

http://htmldog.com/articles/suckerfish/dropdowns/

Answer 4

I think that you are trying to make the parent element be highlighted when navigating the submenu / submenu. To do this, you need to apply guidance styles to <li>, not to <a>. An example of this in action can be seen in one of the demos of suckerfish .