2012-01-31 43 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 「一:激活」 的任何地方。嘗試添加英寸

相關問題