html - CSS/HTML 导航栏 - 事件/当前链接

Question

我正在尝试在我的导航栏上创建一个事件/当前链接。

在 HTML 中，有一个元素在其中一个元素上具有 class="current" 属性。

如果类是事件的/当前的，我希望该元素有背景

<ul id="trans-nav">
    <li  class="current">
        <a href="#">About Us</a>
        <ul>
            <li><a href="/contact">Contact Us</a></li>
            <li><a href="/login">Login</a></li>
        </ul>
    </li>
</ul>

我的 CSS 需要什么？

#trans-nav {
    list-style-type: none; 
    height: 40px; 
    padding: 0; 
    margin: 0;
    position:relative;
    z-index:999;
}
#trans-nav {
    list-style-type: none; 
    height: 40px; 
    padding: 0; 
    margin: 0;
}
#trans-nav li {
    float: left; 
    position: relative; 
    padding: 0; 
    line-height: 40px;
}
#trans-nav li:hover {
    background-position: 0 -40px;
}
#trans-nav li a {
    display: block; 
    padding: 0 15px; 
    color: #666666; 
    text-decoration: none;
}
#trans-nav li a:hover {
    background-color:#F36F25; 
    color: #eeeeee;
}
#trans-nav li active {
    background-color:#F36F25; 
    color: #eeeeee;
}
#trans-nav li ul {
    opacity: 0;
    position: absolute;
    left: 0;
    width: 200px;
    background: #EEEEEE;
    list-style-type: none;
    padding: 0;
    margin: 0; 
}
#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: #EEEEEE;
}
#trans-nav li ul li a:hover {
    background: #666666;
    color:#EEEEEE;
}

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }

我已经试过了，但是没用:

#trans-nav li active {
    background-color:#F36F25; 
    color: #eeeeee;
}

Answer 1

你离得太近了!

#trans-nav li .active {
background-color:#F36F25; 
color: #eeeeee;
}

你只是忘记了 . 上的 .active

Working Fiddle