导航栏的下拉框点击一次之后背景就消失了
导航栏的下拉框点击一次之后背景就消失了,只剩下文字了。背景就成透明的了,怎么解决啊，，急！！！！！！！！！

RT。。。

代码如下
css：
<style type="text/css">
  * {
  padding:0;
  margin:0;
  }
  body {
  font-family:verdana, sans-serif;
  font-size:small;
  }
  #navigation, #navigation li ul {
  list-style-type:none;
  }
  #navigation {
  margin:0px;
  }
  #navigation li {
  float:left;
  text-align:center;
  position:relative;
  }
  #navigation li a:link{ /*导航子集设置*/
  display:block; /*CSS1　块对象的默认值。用该值为对象之后添加新行*/
  text-decoration:none;
  color:#000;
  width:117px;
  height:28px;
  line-height:28px; /*默认行高*/
  border:1px #cccccc; /* solid */
  border-width:0 0 0 0;
  background:#cccccc;
  padding-left:0px;
  }
#navigation li a:visited { /*导航设置*/
  display:block;
  text-decoration:none;
  color:#000;
  width:px;
  height:36px;
  line-height:36px;
  border:1px solid #fff;
  border-width:0 0 0 0;
/* background:; */
  padding-left:0px; /*由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度*/
  }
  #navigation li a:hover { /*导航栏选中后颜色*/
  color:#fff;
  background:#cccccc;
  }
  #navigation li ul li a:hover { /*导航菜单选中颜色*/
  color:#fff;
  background:#6b839c;
  }
  #navigation li ul {
  display:none;
  position:absolute;
  top:20;
  left:0;
  margin-top:1px;
  width:50px; /*100*/
  }
  #navigation li ul li ul {
  display:none;
  position:absolute;
  top:0px;
  left:1px; /*130*/
  margin-top:0;
  margin-left:1px;
  width:100px; /*120*/
  }
</style>



javascript：
<script type="text/javascript">

function displaySubMenu(li) {
  var subMenu = li.getElementsByTagName("ul")[0];
  subMenu.style.display = "block";
  }
  function hideSubMenu(li) {
  var subMenu = li.getElementsByTagName("ul")[0];
  subMenu.style.display = "none";
  }
</script>



------解决方案--------------------
加个a:active样式