Question

这是我的菜单HTML代码

<div style="visibility:visible; color: #FFF; top:125px; width:100%; height:40px; position:absolute; display:block;background:#2B63B3;">
<ul id="trans-nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Academic</a>
     <ul>
        <li> <a href="#">Sub Menu 1</a> </li>
        <li> <a href="#">Sub Menu 2</a> </li>
        <li> <a href="#">Sub Menu 3</a> </li>
     </ul>
   </li>
   <li><a href="#">Administration</a></li>
   <li><a href="#">Miscellanous</a>
     <ul>
       <li> <a href="#">Sub Menu 1</a> </li>
       <li> <a href="#">Sub Menu 2</a> </li>
     </ul>
   </li>
</ul>
</div>

这是菜单的CSS代码

#trans-nav { list-style-type: none; height: 40px; padding: 0px 15px; margin: 0px; }
#trans-nav li { float: left; width:110px; position: relative; padding: 0px; line-height: 40px; background: #2B63B3; text-align:center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #97B7E6; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #2B63B3; list-style-type: none; padding: 0; margin: 0;  z-index:1;}
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2B63B3; }
#trans-nav li ul li a:hover { background: #2B63B3; }

当我将鼠标悬停在任何菜单项上时，颜色会发生变化，当我点击项目时，它会导航到页面，但文本的颜色会恢复为白色。我希望保持更改的颜色，直到没有点击任何其他菜单项。

任何建议，建议或指导都是可观的。

提前感谢你们

Answer 1

您可以通过javascript将“.current”类添加到锚标记。并给它那些风格。

（或者，如果您的导航分离在所有页面上，只需将其添加到当前页面导航，不需要js。）

如何保持单击菜单项的CSS样式选择

1 个答案: