CSS 使用现有代码制作事件状态导航元素

Question

伙计们，我正在使用另一个人的代码，想知道如何让有问题的导航显示“事件状态”。换句话说，如何使该页面上的导航项处于事件状态并显示不同的 bg 颜色/文本颜色？这是 CSS 和 HTML，很简单，我知道...但我不知道如何让这个事件状态起作用。

CSS:

.menu {width:100%; margin:0; padding:0;}
.menu a.menuitem {
    font-size: 10px;
    font-weight: bold;
    color: #a7a7a7;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    border-bottom: 1px solid #ffffff;
    margin: 0;
    padding: 4px 10px 4px 10px;
    text-decoration: none;
}
.menu a.menuitem:visited, .menu .menuitem:active {color:#9ca1a6; text-decoration: none;}




.menu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/position:absolute; top:5px; right:5px; border: none;}
.menu a.menuitem:hover {
    background: #6dd0f7;
    color: #fff;
    text-decoration: none;
}


.menu div.submenu { /*DIV that contains each sub menu*/ width:auto; margin:0; padding:0;}

.menu div.submenu ul { /*UL of each sub menu*/ list-style-type:none; font-size:12px; margin:0; padding:0;}

.menu div.submenu ul li{border-bottom:1px solid #AFAFAF; line-height:12px; margin:0; padding:0;}

.menu div.submenu ul li a{display:block; font-size:12px; color:#383838; text-decoration: none; margin:0; padding:5px 10px 5px 20px;}

.menu div.submenu ul li a:link {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:visited {color:#383838; text-decoration:none;}

.menu div.submenu ul li a:active {background:#D7EEFF; color:#0164B5; text-decoration:none;}

.menu div.submenu ul li a:hover {background:#D7EEFF; color:#0164B5; text-decoration:none;}


HTML:

         <div class="menu">
            <a class="menuitem submenuheader" href="seller-account-store-profile.html">My Store Profile</a>
            <a class="menuitem submenuheader" href="">Messages (241)</a>
            <a class="menuitem submenuheader" href="">Account Settings</a>
            <a class="menuitem submenuheader" href="">Fees & Activities</a>
            <a class="menuitem submenuheader" href="">Notifications</a>
            <a class="menuitem submenuheader" href="">Contact Support</a>
          </div>        

Answer 1

:active css 选择器仅在您单击(鼠标按下)时选择链接。参见 here 。

要以另一种方式显示当前页面的导航项，您需要向该链接添加一个额外的类，并将您的样式定义添加到该类。例如:

<a class="menuitem submenuheader active" href="">Messages (241)</a>

并设置样式:

.menu a.active {
/* your definitions */
}