Сохранение меню выше, выделенного в вертикальной линии suckerfish

Question

Я видел этот вопрос, но я не могу применить ответы на свое собственное меню. В основном это мое сообщество suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html), я сделал некоторые из моих собственных настроек color-wise/font-wise/и очистки границы от таблицы. Как я могу сделать так, чтобы при перемещении по всем параметрам выбора все, что вы прошли, остается выделенным, поэтому вы знаете, какие параметры вы выбрали, чтобы получить, где вы находитесь? Я выполнил пробную версию и ошибки всех стилей, с которыми она столкнулась, например, #nav, this и #nav, но ни один из них, похоже, не сразу ссылается на все предыдущие меню одного вложенного элемента списка.

Я в значительной степени преподавал это себе, поэтому я постарался быть максимально ясным в своем вопросе, надеюсь, у меня есть смысл !!!

СПАСИБО СМОТРЕТЬ!

Answer 1

Вы должны переместить цветовые стили из < в > теге тегами < литий >:

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

А также установить на < > взять его цвет от его родителей:

#nav li a { 
    color:inherit; 
} 

См. Версию вашего примера с этими изменениями: http://demo.raleighbuckner.com/so/1347579/

Причина этого изменения в том, что второй и третий уровни навигации являются дочерними элементами тега <li>, а не тега <a>. Таким образом, когда вы переходите через под-список, вы больше не зависаете над <a>, и этот цвет больше не применим.

Перемещение стиля окраски до <li> позволяет зависать по-прежнему.

Answer 2

Выше работает отлично в Firefox, но не в IE, потому что IE не уважает наследование. Это делает так, чтобы цвет ссылки не оставался при его цвете наведения, когда вы перемещаете мышь в какую-либо другую часть тега LI.

Код ниже не очень, но это работает:

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);