Question

我想在用户选择菜单后更改菜单的颜色。我希望Year，Class，Subject菜单项在用户翻转后更改为蓝色，并在用户浏览其下拉列表时保持蓝色。我可能做一些非常愚蠢的事情。

HTML

<nav id=global>
     <ul id="nav">

       <li>  <a href="index.html"><b>Home</b></a>

       </li>
                <li>  <a href="#">Subject</a>
            <ul>
                <li><a href="page2.html">test1</a></li>
                <li><a href="#" >test1</a></li>
                <li><a href="#" >test1</a></li>
                <li><a href="#" >test1</a></li>
                <li><a href="#" >test1</a></li>
                <li><a href="#" >test1</a></li>
            </ul>
        </li>

          <li><a href="#">CLASS</a>
            <ul>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1 </a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                     <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>                    
                <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>                    
                <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>
                <li><a href="#">Ptest1</a></li>
                    <li><a href="#">Shtest1</a></li>
                    <li><a href="#"> test1</a></li>
                    <li><a href="#">test1</a></li>
                    <li><a href="#"> test1</a></li>
                    <li><a href="#">test1 test1 test1</a></li>
                  <li><a href="#">  test1</a></li>
                <li><a href="#">test1</a></li>                    
                <li><a href="#">test1</a></li>
                    <li><a href="#">test1</a></li>


            </ul>
       </li>
         <li><a href="#" >Year</a>

                <ul>
                    <li><a href="#">David Hodd</a></li>
                    <li><a href="#">David Hodd</a></li>
                    <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
         <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>
        <li><a href="#">David Hodd</a></li>

                </ul>
       </li>


      </ul>
    </nav>

CSS

#nav { 
font-size:14px; 
color:#fff;
margin:2px; 
padding:0px; 
position:absolute; 
top:8px;
left:25px;
font-weight:bold;
z-index:400;

}
#nav a.active {
    color:#000;
}

#nav > li {
 font-weight:normal;
list-style-type:none; 
float:left; 
display:block; 
margin:0px 0px;
color:#000;
position:relative; 
padding:10px; 
width:190px;

}
#nav > li:hover ul {
 display:block; 
color:#000;
 }
#nav > li:hover  { 
background-color:#fff;
-moz-border-radius:10px; 
-webkit-border-radius:10px;
border-radius:10px; 
color:#000;
-moz-box-shadow:0 1px 1px #777;
-webkit-box-shadow:0 1px 1px #777;
box-shadow:0 1px 1px #777;
color:#000;
}

#nav li ul {
font-size:11px;
 margin:0px; 
padding:0px; 
display:none;
color:#000;}

#nav li ul li {
font-size:10px; 
list-style-type:
none; 
margin:0px 0 0 0;
color:#000;
}
#nav li ul li a { 

font-size:10px;
display:block; 
padding:5px 10px; 
color:#000; 
text-decoration:none;
}

#nav li ul li:hover a { background-color:#ccc; 
-moz-border-radius:5px;
 -webkit-border-radius:5px;
border-radius:5px;
}
#nav li span { 
cursor:pointer;
margin:0px 10px;
color:#000; 
}

Answer 1

您尚未在任何地方定义“a：active”。尝试添加它。

下拉CSS无法获得颜色变化

1 个答案: