Css 页面加载时，悬停颜色将不会保持不变

一旦用户选择的页面加载后，我无法编写CSS以使左侧导航保持悬停状态。以下是网站：

以下是第二级导航的CSS：

/***********二级垂直导航**************/

.second-level-menu-vertical {
    float: left;
    font-family: 'vERDANA',sans-serif;
    font-size: 110%;
    font-weight: bold;
    margin-left: -10px;
    margin-top: 57px;
    text-transform: lowercase;
    width: 155px;
    z-index: 200;
    position:absolute;
}

.second-level-menu-vertical ul {
    padding-bottom: 10px;
}
.second-level-menu-vertical li {
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    padding: 0 0.75em;
}
.second-level-menu-vertical li a {
    border-bottom: 1.75px dashed #C9C9C9;
    color: #666;
    display: block;
    padding: 1em 0;
    text-decoration: none;
}
.second-level-menu-vertical li a:hover {
    background-color: #FDCC00;
    border-radius: 7px 7px 7px 7px;
    color: #000;
    text-decoration: none;
}
.second-level-menu-vertical li.selected {
    background-color: #FDCC00;
    border-radius: 7px 7px 7px 7px;
    color: #000;
    text-decoration: underline;
}

---

感谢您的帮助

您需要做一些事情，将一个“当前”类添加到与您加载的页面对应的列表项中，然后您可以使用CSS执行以下操作：

.second-level-menu-vertical li a:hover, .second-level-menu-vertical li.current a {
    background-color: #FDCC00;
    border-radius: 7px;
    color: #000;
    text-decoration: none;
}

您可以使用Javascript（在客户端）或在生成ASP.NET代码的菜单中（通过codebehind）添加该类。。。我不能建议你哪一个对你更好，因为你只包括CSS

编辑

鉴于此标记：

<div class="second-level-menu-vertical">
    <ul class="top-level">
        <li><a href="K-5th-Grades.aspx">K-5th Grades</a></li>
        <li><a href="6th-grade.aspx">6th Grade</a></li>
        <li><a href="7th-grade.aspx">7th Grade</a></li>
        <li><a href="8th-grade.aspx">8th Grade</a></li>
        <li><a href="9th-grade.aspx" class="selected">9th Grade</a></li>
        <li><a href="10th-grade.aspx">10 Grade</a></li>
        <li><a href="11th-grade.aspx">11th Grade</a></li>
        <li><a href="12th-grade.aspx">12th Grade</a></li>
        <li><a href="college-checklist.aspx">College Checklist</a></li>
        <li><a href="savings-growth-calculator.aspx">Savings Growth Calculator</a></li>
    </ul>
</div>

这是一个非常简单的jQuery，您需要它才能工作。它基于您当前在站点上使用的URL做出了两个假设，其中一个假设是您在这些URL中没有查询字符串，并且您将始终以与菜单中给定href匹配的页面名称结束

// you want the path of the location, 
// as that should not include the querystring, 
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// This selector finds the a tag that 
// has an href matching your currentPage
// variable. It then adds a selected class
// to that a tag
var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected");

请注意，使用常规javascript来实现这一点要复杂一些。上面的示例可以在jsFiddle（）上看到，但显然它在那里不起作用（不过可能更容易阅读），因为它无法正确链接到您的站点

非jQuery Javascript方法（）：

//您需要位置的路径，
//因为这不应该包括查询字符串，
//如果你有
var pathGroup=location.pathname.split（“/”）；
//按/字符拆分
//然后得到最后一个元素。。。这应该是你的
//当前页面名称
var currentPage=pathGroup[pathGroup.length-1]；
//获取顶级元素，然后获取第一个元素
//返回的元素，作为getElementsByClassName
//返回一个数组
var sideMenu=document.getElementsByClassName（“二级垂直菜单”）[0]；
//从该项目获取所有li项目
var sideLinks=sideMenu.getElementsByTagName（“li”）；
//循环浏览返回的列表
用于（侧链中的var链接）{
//确保你正在处理一个对象
if（侧链类型[链接]=“对象”）{
//从li内部获取标签
var aTag=sideLinks[link].getElementsByTagName（“a”）[0]；
//获取标签的href
var href=aTag.getAttribute（“href”）；
如果（href==currentPage）{
//如果href与当前页面匹配
//值，将类设置为“选定”
aTag.setAttribute（“类”、“选定”）；
}
}
}

您需要使用一些逻辑（服务器端或客户端）来实现这一点。IMO最简单的方法是使用jQuery。看这里：你提供了完全相同的页面。为什么你会期望它的行为会有任何不同？JS方法会更容易实现，因为我可以将它弹出到站点中。master，我讨厌进一步询问，但你能告诉我脚本会是什么样子吗？显然，jQuery方法要简洁得多，但我不知道你是否可以在这个项目中使用jQuery，所以我也给了你一个简单的JS方法。希望这些帮助！

// you want the path of the location, 
// as that should not include the querystring, 
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// This selector finds the a tag that 
// has an href matching your currentPage
// variable. It then adds a selected class
// to that a tag
var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected");

// you want the path of the location, 
// as that should not include the querystring, 
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// get the top level element, and get the first
// element returned, as getElementsByClassName 
// returns an array
var sideMenu = document.getElementsByClassName("second-level-menu-vertical")[0];
// get all the li items from that item
var sideLinks = sideMenu.getElementsByTagName("li");
// loop through the list returned
for(var link in sideLinks){
    // make sure that you're dealing with an object
    if(typeof sideLinks[link] == "object"){
        // get the <a/> tag from inside the li
        var aTag = sideLinks[link].getElementsByTagName("a")[0];
        // get the <a/> tag's href
        var href = aTag.getAttribute("href");

        if(href == currentPage){
            // if the href matches your currentPage
            // value, set the class to 'selected'
            aTag.setAttribute("class","selected");
        }
    }
}