keeping higher menus highlighted in suckerfish vertical

Question

I've seen this question asked but I can't seem to apply the answers to my own menu. My suckerfish menu basically is this (http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html), I've made some of my own adjustments color-wise/font-wise/and clearing the border from the table. How can I make it so that when you move throughout the options of a selection, everything you've gone through stays highlighted, so you know which options you've selected to get where you are? I've done trial and error of all the styles it came with like #nav, this and #nav, that, but none of them seem to refer to all of the prior menus of one nested list item at once.

I've pretty much been teaching this to myself so I've tried to be as clear as possible in my question, hopefully i make sense!!!

THANK YOU SO MUCH!

Answer 1

You need to move the color styles from the <a> tag to the <li> tags:

#nav li { /* all list items */
    ...
    background-color : white;
    color : black;
}
#nav li:hover,
li.sfhover{
    color : white;
    background-color : black;
    }

And also set the <a> to take it's color from it's parent:

#nav li a {
    color:inherit;
}

Please see a version of your example with these changes made here: http://demo.raleighbuckner.com/so/1347579/

The reason for this change is that the second and third levels of the navigation are children of the <li> tag and not of the <a> tag. So, when you mose over the sub-list, you are no longer hovering over the <a> and the color is not longer applicable.

Moving the coloring style up to the <li> allows the hover to still be valid.

Answer 2

The above works fine in Firefox but not in IE because IE does not respect inherit. This makes it so that the color of the link does not stay at its hover color when you move your mouse to some other part of the LI tag.

The code below is not pretty but it works:

HTML

<ul id="nav">
 <li ><a href="test.org" class="navlink">Test</a>
             <ul>
         <li ><a href="test2.org">Test2</a></li>
                <li ><a href="test2.org">Test2</a></li>
             </ul>
        </li>
 <li ><a href="test.org" class="navlink">Bonk</a>
             <ul>
         <li ><a href="test2.org">Bonk2</a></li>
                <li ><a href="test2.org">Bonk2</a></li>
             </ul>
        </li>
</ul>

Javascript

sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = '#FFFFFF';
   }
   this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
   var els = this.getElementsByTagName("A");
   for (var j=0; j<els.length; j++) {
    if(els[j].className =="navlink") els[j].style.color = 'Red';
   }
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);