为什么我的导航文章:活动背景颜色不起作用？

Question

在我的导航中,我希望能够并单击导航链接,并在您转到页面时让li项目更改颜色.例如.我单击导航中的"关于我们"选项卡,它将转到"关于我们"页面,导航栏中的"关于我们"页面选项卡已更改颜色.我尝试了导航ul li:主动但不起作用.

这是css:

#nav {

    display: block;

    position:relative;

    border: 1px solid #002799;

    background: linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    padding: 0px 0px 0px 0px;

    border-radius: 15px;

    height: 40px;

    width: 470px;

    margin: 0px auto;

    font: Bold 16px Verdana;


}

#nav ul {

    margin: 0px;

    padding: 0px;

    min-width:250%;


}


#nav li {

    list-style: none;

    float: left;

    position: relative;

    display:inline;

    width:auto;
}




#nav ul li {

    list-style: none;

    float: left;

    position: relative;

}

#nav ul li:last-child a {

    border:none;

}

#nav ul li:hover {

    background: #060652;

}

#nav ul li:active {

    background: #060652;

}

#nav ul li:hover ul {

    display:block;

    width:100%;
}

#nav ul ul {

    display: none;

    position:absolute;

    left:0px;

    min-width:250%;

    z-index: 999;

    background-color: #4970E3;

}

#nav ul ul li {

    border: 1px solid #FFFFFF;

    display:block;

    float: none;


    z-index: 999;

    width: auto;

}

#nav ul ul li a {

    border-right: none;

    font: Bold 16px Verdana;

    width: auto;

}

#nav ul li a {

    text-decoration: none;

    display: block;

    border-right: 1px solid #121B3E;

    padding: 10px 15px;

    color: #fbfbfb !important; 
}

这是html:

<div id="nav">
<ul>
<li><a href="http://osweb01.ostech.com.au/">Home</a>
</li>

<li><a href="http://osweb01.ostech.com.au/?page_id=12">About Us</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=19">Why OSTech</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=21">Testimonials</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=23 ">Case Study 1</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=25">Case Study 2</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=27">Green IT</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=29">OSdesk Intel vPro</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=31">Workstation Innovation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=33">Consolidation and Centralisation</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=35">The Green Grid</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=37">Clean Technologies</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=39">OSdesk Remote Management</a></li>
</ul>
</li>
<li><a>What We Do</a>
<ul>
    <li><a href="http://osweb01.ostech.com.au/?page_id=41">OSdesk</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=43">OSguard</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=45">OSmon</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=47">OSvault & OSclass</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=49">OSmail & OShost & OSshare</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=52">OStrack & OSdms</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=54">OSarchive & OSgroup</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=62">OSfaq & OShelp</a></li>
    <li><a href="http://osweb01.ostech.com.au/?page_id=56">OSbill & OScal</a></li>
</ul>
</li>
<li><a href="http://osweb01.ostech.com.au/?page_id=16">Contact Us</a><ul>
</li>
</ul>
</div>

Answer 1

你误解了什么:active意思.

您的网络浏览器没有概念li在页面上代表当前页面,除非您以某种方式告诉它.

活动选择器选择活动链接.也就是说,您使用键盘导航选择的链接(但尚未关注)或您刚刚点击的链接(在新页面加载之前).加载新页面后,没有任何链接再次处于活动状态.

所以,你只能使用:active上a的元素,而不是你想在这里做什么.

相反,您希望为li表示当前页面的任何选项卡添加一个类,并使用CSS来li适当地设置样式:

<li><a href="...">Why OSTech</a></li>
<li class="current"><a href="...">Testimonials</a></li>
<li><a href="...">Case Study 1</a></li>

有:

li.current {
    background: #060652;
}