Html 保持较高的菜单在垂直方向上突出显示
我见过有人问这个问题,但我似乎无法将答案应用到我自己的菜单上。我的吸盘鱼菜单基本上是这个(),我自己做了一些颜色/字体方面的调整,并从表中清除了边框。我怎样才能使它在你移动一个选择的选项时,你所经历的一切都保持高亮显示,这样你就知道你选择了哪些选项来达到你的目的了?我已经对它附带的所有样式进行了反复试验,如#nav、this和#nav、that,但它们似乎都没有同时引用一个嵌套列表项的所有先前菜单 我一直在教自己这个,所以我试着在我的问题上尽可能的清晰,希望我有道理Html 保持较高的菜单在垂直方向上突出显示,html,css,menu,hover,suckerfish,Html,Css,Menu,Hover,Suckerfish,我见过有人问这个问题,但我似乎无法将答案应用到我自己的菜单上。我的吸盘鱼菜单基本上是这个(),我自己做了一些颜色/字体方面的调整,并从表中清除了边框。我怎样才能使它在你移动一个选择的选项时,你所经历的一切都保持高亮显示,这样你就知道你选择了哪些选项来达到你的目的了?我已经对它附带的所有样式进行了反复试验,如#nav、this和#nav、that,但它们似乎都没有同时引用一个嵌套列表项的所有先前菜单 我一直在教自己这个,所以我试着在我的问题上尽可能的清晰,希望我有道理 非常感谢你 您需要将颜色样式
非常感谢你 您需要将颜色样式从 此更改的原因是导航的第二级和第三级是
将着色样式上移到
#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;
}
<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);
Javascript
sfHover=函数(){
var sfEls=document.getElementById(“nav”).getElementsByTagName(“LI”);
对于(var i=0;i