Question

我已经看到了这个问题，但我似乎无法将答案应用到我自己的菜单中。我的suckerfish菜单基本上是这个（http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html），我已经做了一些我自己的调整颜色/字体方式/并从表中清除边框。我怎样才能做到这一点，当你在选择选项中移动时，你所经历的一切都会突出显示，所以你知道你选择了哪些选项来获得你的位置？我已经完成了它所带来的所有样式的反复试验，如#nav，this和#nav，但是它们似乎都没有一次引用一个嵌套列表项的所有先前菜单。

我几乎一直在教这个，所以我试着在我的问题中尽可能清楚，希望我有意义！

非常感谢你！

Answer 1

您需要从＆lt; a＆gt;移动颜色样式。标记为＆lt; li＆gt;标记：

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

并设置＆lt; a＆gt;从它的父母那里拿出它的颜色：

#nav li a {
    color:inherit;
}

请在此处查看您的示例版本，其中包含以下所做的更改：http://demo.raleighbuckner.com/so/1347579/

此更改的原因是导航的第二级和第三级是＆lt; li＆gt;的子级。标签而不是＆lt; a＆gt;标签。因此，当您浏览子列表时，您不再将鼠标悬停在＆lt; a＆gt;上。并且颜色不再适用。

将着色样式移至＆lt; li＆gt;允许悬停仍然有效。

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

保持较高的菜单在suckerfish垂直突出显示

2 个答案: