2012-01-31 215 views
0

我想在用户选择菜单后更改菜单的颜色。我希望一旦用户滚动,Year,Class,Subject菜单项就会变为蓝色,并在用户浏览下拉菜单时保持蓝色。我可能会做一些非常愚蠢的事情。无法在下拉菜单中获取颜色更改CSS

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> 

#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; 
} 
+0

可能浏览器不匹配..也许你不爽考虑使用JavaScript .. – rofans91 2012-01-31 08:53:42

回答

0

您还没有定义的CSS “一:激活” 的任何地方。尝试添加英寸