0

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

在 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;
}
4

3 回答 3

0

你的 CSS 需要 . 类的指示器和链接选择器。

#trans-nav li.current a {
    background-color:#F36F25; 
    color: #eeeeee;
}
于 2013-04-01T20:41:48.470 回答
0

试试这个，第一个将针对current类的 li，第二个将针对current(About Us) 的链接，并且由于直接后代选择器而不会向下流到子菜单>。

#trans-nav .current {
    background-color:#F36F25; 
}
#trans-nav .current > a {
    color: #eeeeee;
}
于 2013-04-01T20:42:21.410 回答
0

你离得太近了！

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

你只是忘了.开.active

工作小提琴

于 2013-04-01T20:42:37.723 回答