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;
}
可能瀏覽器不匹配..也許你不爽考慮使用JavaScript .. – rofans91 2012-01-31 08:53:42