日期:2014-05-17  浏览次数:20716 次

求助~下拉菜单问题~拜托了
各位高手,如何实现浏览过的菜单显示浏览痕迹,浏览二级菜单在一级菜单上也能有所体现?
我写的css,只有一级菜单能实现显示浏览痕迹,而且会一直显示,再点别的,点过的依然显示浏览过的痕迹,只有清除缓存才能恢复原状。
我想实现的功能是点哪个,哪个能看到visited,别的正常,然后点另一个,另一个显示visited,前一个恢复原来的状态,请问各位应该怎么实现好?
代码如下
<!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/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body { background:#999;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}
*{margin:0;padding:0;} 
ul { list-style:none}
#nav { 
line-height: 39px; list-style-type: none; background:#CCC; 

#nav a { 
display: block; padding:0 25px; text-align:center; text-decoration:none;font-size:14px; font-weight:bold;color:#ffffff;

#nav a:link { 
color:#ffffff; text-decoration:none;font-size:14px; font-weight:bold;
}
#nav a:visited { 
color:#ffffff;text-decoration:none;font-size:14px; font-weight:bold;

#nav a:hover { 
color:#131414;text-decoration:none;font-size:14px; font-weight:bold; 


#nav li a:link { 
color:#ffffff; text-decoration:none;font-size:14px; font-weight:bold;
}
#nav li a:visited { 
color:#131414;text-decoration:none;font-size:14px; font-weight:bold;background:#ccc;

#nav li a:hover { 
color:#131414;text-decoration:none;font-size:14px; font-weight:bold; background: #F6F6F6;

#nav li { 
float: left;

#nav li ul { 
line-height: 27px; list-style-type: none;text-align:left; overflow:hidden;
left: -999em; width: 130px; position: absolute; 

#nav li ul li{ 
float: left; width: 130px; 
background: #F6F6F6; 

#nav li ul a{ 
display: block; width: 130px;text-align:left; padding-left:26px;

#nav li ul li a:link { 
color:#666; text-decoration:none; font-size:12px; font-weight:bold;

#nav li ul li a:visited { 
color:#000;text-decoration:none; font-size:12px; font-weight:bold; background:#CCC;

#nav li ul li a:hover { 
color:#FFFFFF;text-decoration:none; font-size:12px; font-weight:bold;
background:#f0020d; 

#nav li:hover ul { 
left: auto; 

#nav li.sfhover ul { 
left: auto; 

#content { 
clear: left; 

</style>
</head>

<body>

  <div id="nav"> 
  <ul>
  <li><a href="1" >1111</a> 
  </li> 
  <li><a href="2">2222</a> 
  </li> 
  <li><a href="3" >3333</a> 
  </li> 
  <li><a href="4">4444</a> 
  </li> 
  <li><a href="5" >55555</a> 
  <ul> 
  <li><a href="51" >55551111</a></li> 
  <li><a href="53">55552222</a></li> 
  <li><a href="53" >55553333</a></li> 
  </ul> 
  </li> 
  <li><a hre