无法在下拉菜单中获取颜色更改CSS
问题描述:
我想在用户选择菜单后更改菜单的颜色。我希望一旦用户滚动,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;
}
答
您还没有定义的CSS “一:激活” 的任何地方。尝试添加英寸
可能浏览器不匹配..也许你不爽考虑使用JavaScript .. – rofans91 2012-01-31 08:53:42