Javascript 具有不同颜色选项的浮动线菜单/导航

我正在尝试使用我的wordpress网站

我只是想知道如何才能使浮动线更改悬停/选定的每个导航项目的颜色，因为它目前都是红色（

背景色：#800；高度：2px；

）

这就是我试图实现的目标：
菜单1-悬停浮动线为绿色，
菜单2-浮动线为黄色，
菜单3-红色，菜单4-蓝色等。

感谢您的帮助

谢谢。

有一种更为“CSS”的方法来实现这一点，但使用一些javascript，您可以获得一些非常可读的内容。使用这种方法，您的页面将需要正确初始化浮动线（

.hightlight

）和导航边框（

\sses1>ul

）

理想的解决方案是为每个浮点数行创建一个类，但以下是我仅使用javascript获得的结果：

<!-- added individual classes for nav items -->
<div id="sse1">
  <div id="sses1">
    <ul>
      <li><a class="nav-item-1" href="?menu=1&skin=2&p=Javascript-Menus">Javascript Menus</a></li>
      <li><a class="nav-item-2" href="?menu=1&skin=2&p=Horizontal-Menus">Horizontal Menus</a></li>
      <li><a class="nav-item-3" href="?menu=1&skin=2&p=Web-Menus">Web Menus</a></li>
    </ul>
  </div>
</div>

为了确保选择器只使用一次。高亮显示存在，我建议将原始javascript的结尾修改为：

function initMenu() {
    sse1.builMenu();
    customHandleMenu();
}

if (window.addEventListener) {
    window.addEventListener("load", initMenu, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", initMenu);
}
else {
    window["onload"] = initMenu;
}

看一看

---

附言：事件链经过了细微的修改以适应JSFIDLE。

您所要求的实际上并不琐碎。该插件的作者实际上是在根据鼠标悬停的位置设置li元素的“li.highlight”、宽度和左侧位置的动画。您可以通过更改此项的CSS定义轻松更改此项的颜色。例如，要使其变为黄色，只需在菜单的css文件下面包含此css定义：

#sses1 li.highlight {
    background-color: yellow;
    top: 36px;
    height: 2px;
    border-bottom: solid 1px yellow;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}

---

我知道这不是完整的解决方案。。。但是，如果您有雄心壮志，可以修改javascript，根据.highlight元素所在的li元素添加一个新类

此菜单中没有使用下划线。它的工作原理是创建一个

li

和

border-bottom

集合。对不起，我想我读过下划线，我会相应地更新它，它必须放在已经定义了“hightlight”元素的地方。我将更新悬停颜色。编辑，请更新你的下一票，因为它现在回答了OPs问题谢谢你抱歉Frederik我仍然无法使它工作，你是否可以指出我将插入你的代码的javascript文件的哪一行，例如第100行或任何代码行？谢谢我没有贬低你，但为了公平起见，我会投你一票。谢谢。嗨，乔尔廷，谢谢你的回复。对不起，我不是想把背景改成黄色。我想为每个悬停和选中的菜单项使用不同的浮动线颜色，例如悬停项1、浮动线为黄色、项目2、浮动线为绿色等等。我需要以某种方式修改标枪，这就是为什么我需要一些帮助。有什么建议吗？谢谢，我理解你的问题。我试图解释解决方案非常复杂。但是，我已经给了你如何完成它的开始。

#sses1 li.highlight {
    background-color: yellow;
    top: 36px;
    height: 2px;
    border-bottom: solid 1px yellow;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}