<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style>
/*未点击项状态颜色*/
.bb{width:100px}
.bb a:link{color:#0000fftext-decoration:none}
.bb a:visited{color:#0000fftext-decoration:none}
.bb a:hover{color:#ff0000text-decoration:none}
.bb a:active{color:#0000fftext-decoration:none}
/*点击项状态颜色*/
.aa{width:100px}
.aa a:link{color:#000000text-decoration:none}
.aa a:visited{color:#000000text-decoration:none}
.aa a:hover{color:#ff0000text-decoration:none}
.aa a:active{color:#000000text-decoration:none}
</style>
</head>
<script type="text/javascript">
<!--
function changeColor(obj){
var str=document.getElementsByTagName("li")
for(var i=0i<str.lengthi++){
str[i].className="bb"
}
obj.className="aa"
}
-->
</script>
<body>
<div >
<div >
<div ><span >当前位置->会员中心</span></div>
<div ><span>欢迎您早上好！ <a href="#">新消息(4)</a> <a href="#">退出系统</a></span></div>
</div>
<div >
<div>会员中心</div>
<div >基本资料管理</div>
<div id="aaa">
<ul>
<li id="cc" class="aa" onClick="changeColor(this)" ><a href="#">基本资料完善</a></li>
<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">密码修改</a></li>
<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">平台销售额</a></li>
<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">评价管理</a></li>
<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">信誉度</a></li>
<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">交易记录管理</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
定义链接在鼠标被激活（点下去）时候的样式。操作方法如下：
1、新建一个html文件，命名为test.html，a标签四个不同的伪类，有不同的效果。
2、利用a标签伪类改变字体的颜色。下面代码实现了a标签的默认颜色为红色，点击链接过后，颜色变为绿色，当鼠标放在连接上显示粉红色。
3、利用a标签伪类改变字体的大小。下面代码实现了a标签的默认大小为20px，点击链接过后，大小变为40px。
4、利用a标签伪类改变链接的背景颜色。下面代码实现了a标签的默认背景颜色为红色，点击链接过后，背景颜色变为绿色。
5、利用a标签伪类改变链接的字体。下面代码实现了a标签的默认字体为Monospace，点击链接过后，字体变为Arial。
6、最后利用a标签伪类去掉连接默认的下划线。下面代码实现了a标签在任何状态下都没有下划线。
li:active { display:inline-blockwidth:100pxheight:30pxbackground:#06b2e3color:#fff}/* display是一定要加上的，不然背景显示会有问题，width和height的具体值你自己写*/不过这只是鼠标释放以后的才会显示的样式。
我猜想你是想鼠标划过时才这样显示，你应该这样写
li:hover { display:inline-blockwidth:100pxheight:30pxbackground:#06b2e3color:#fff}
实际上，要想更多浏览器都兼容这个样式，你应该给<a></a>加伪类。而且伪类的书写时有顺序的，如下所示分别是 link, visited, hover, active. 并且这些伪类都要书写，一个都不能遗漏
a:link{color:black}/*没有访问之前的样式*/
a:visited{color:blue} /*访问之后的样式*/
a:hover{color:red}/*鼠标滑过时的样式*/
a:active{color:green} /*鼠标释放时候的样式*/
希望能帮到你。
