返回首页当前位置：首页 >> 网站建设 >> 正文

#nav li:hover ul 与#nav li a:hover ul 的区别在于

文章来自: | 发表时间:2007-12-7 18:08:55

#nav   li:hover   ul   与#nav   li   a:hover   ul   的区别在于

前者是鼠标在li上时的ul的样式
后者是鼠标在li的a上时的ul的样式


你说的这个通常是用来做二级菜单的，把这个例子在你的机子上运行看看：
<html >
<head >
<meta   http-equiv= "Content-Type "   content= "text/html;   charset=gb2312 "   / >
<title >css菜单演示 </title >


<style   type= "text/css " >
<!--

*{margin:0;padding:0;border:0;}
body   {
  font-family:   arial,   宋体,   serif;
                font-size:12px;
}


#navlist   {
    line-height:   24px;    
    list-style-type:   none;  
    background:#666;
}

#navlist   a   {
  display:   block;
  width:   80px;
  text-align:center;
}

#navlist   a:link     {
  color:#666;  
  text-decoration:none;
}
#navlist   a:visited     {
  color:#666;
  text-decoration:none;
}
#navlist   a:hover     {
  color:#FFF;
  text-decoration:none;
  font-weight:bold;
}

#navlist   li   {
  float:   left;  
  width:   80px;  
  background:#CCC;
}
#navlist   li   a:hover{
  background:#999;
}
#navlist   li   ul   {
  line-height:   27px;    
  list-style-type:   none;
  text-align:left;
  left:   -999em;  
  width:   180px;  
  position:   absolute;  
}
#navlist   li   ul   li{
  float:   left;  
  width:   180px;
  background:   #F6F6F6;  
}
#navlist   li   ul   a{
  width:   156px;
  text-align:left;
  padding-left:24px;
}

#navlist   li   ul   a:link     {
  color:#666;  
  text-decoration:none;
}
#navlist   li   ul   a:visited     {
  color:#666;
  text-decoration:none;
}
#navlist   li   ul   a:hover     {
  color:#F3F3F3;
  text-decoration:none;
  font-weight:normal;
  background:#C00;
}

#navlist   li:hover   ul   {
  left:   auto;
}
#navlist   li.sfhover   ul   {
  left:   auto;
}
#navlist   li.sfhover{
    background:   #999;
}
#content   {
  clear:   left;  
}


-- >
</style >

<script   type=text/javascript > <!--//-- > <![CDATA[// > <!--
function   menuFix()   {
  var   sfEls   =   document.getElementById( "navlist ").getElementsByTagName( "li ");
  for   (var   i=0;   i <sfEls.length;   i++)   {
    sfEls[i].onmouseover=function()   {
    this.className+=(this.className.length >0?   "   ":   " ")   +   "sfhover ";
    }
    sfEls[i].onMouseDown=function()   {
    this.className+=(this.className.length >0?   "   ":   " ")   +   "sfhover ";
    }
    sfEls[i].onMouseUp=function()   {
    this.className+=(this.className.length >0?   "   ":   " ")   +   "sfhover ";
    }
    sfEls[i].onmouseout=function()   {
    this.className=this.className.replace(new   RegExp( "(   ? ¦^)sfhover\\b "),   " ");
    }
  }
}
window.onload=menuFix;

//-- > <!]] > </script >

</head >
<body >

<ul   id= "navlist " >
<li > <a   href= "# " >产品 </a >
  <ul >
  <li > <a   href= "# " >产品1 </a > </li >
  <li > <a   href= "# " >产品2 </a > </li >
  <li > <a   href= "# " >产品3 </a > </li >
  <li > <a   href= "# " >产品4 </a > </li >
  <li > <a   href= "# " >产品5 </a > </li >
  <li > <a   href= "# " >产品6 </a > </li >
  </ul >
</li >
<li > <a   href= "# " >服务 </a >
  <ul >
  <li > <a   href= "# " >服务1 </a > </li >
  <li > <a   href= "# " >服务2 </a > </li >

  <li > <a   href= "# " >服务3 </a > </li >
  <li > <a   href= "# " >服务4 </a > </li >
  <li > <a   href= "# " >服务5 </a > </li >
  <li > <a   href= "# " >服务6 </a > </li >
  </ul >
</li >
</ul >
</body >
</html >

相关文章 更多