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

你的CSS需要。 Class的指示符和链接选择器。

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

Answer 2

试试这个，第一个将使用current类定位li，第二个将定位current（关于我们）的链接，并且不会向下流到子菜单直接后代选择器>。

#trans-nav .current {
    background-color:#F36F25; 
}
#trans-nav .current > a {
    color: #eeeeee;
}

Answer 3

你太近了！

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

您忘记了.

上的.active

Working Fiddle

CSS / HTML Navbar - 活动/当前链接

3 个答案: