posts - 22,comments - 35,trackbacks - 0

<! 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 
{
  margin
:  7px ;
  font
: 12px Verdana, Arial, Helvetica, sans-serif ;
}
{
  list-style-type
:  none ;
  margin
:  0px ;
  padding
:  0px ;
  border
:  thin none ;
}
#nav 
{
  position
:  absolute ;
  font-size
:  9px ;
  opacity
:  0.8 ;
}
#nav a 
{
  display
:  block ;
  width
:  100px ;
  height
:  15px ;
  padding
:  3px 5px 12px ;
  background
:  #666 ;
  color
:  #fff ;
  text-decoration
:  none ;
}
#nav a:hover 
{
  background
:  #333 ;
}
#nav li 
{
  width
:  120px ;
  height
: 30px ;
  overflow
: hidden ;
  background
:  #ccc ;
  padding-bottom
:  3px ;
}
#nav ul 
{
  position
:  absolute ;
  margin-left
:  110px ;
  margin-top
:  -30px ;
}
html>body #nav ul 
{
  margin-left
:  119px ;
  margin-top
:  -39px ;
}
#nav ul 
{
  display
:  none ;
}
#nav li.show ul 
{
  display
:  block ;
}
#nav li.show li ul 
{
  display
:  none ;
}
#nav li li.show ul 
{
  display
:  block ;
}
</ style >
< script  language ="javascript"  type ="text/javascript" >
function  menuFix() {
  
var  sfEls  =  document.getElementById( " nav " ).getElementsByTagName( " li " );
  
for  ( var  i = 0 ; i < sfEls.length; i ++ ) {
    sfEls[i].onmouseover
= function () {
      
this .className += ( this .className.length > 0 ?   "   " "" +   " show " ;
    }
    sfEls[i].onmouseout
= function () {
      
this .className = this .className.replace( new  RegExp( " ( ?|^)show\\b " ),  "" );
    }
  }
}
window.onload
= menuFix;
</ script >
</ head >

< body >
< ul  id ="nav" >
  
< li >< href ="#" > nav item </ a > .
    
< ul >
      
< li >< href ="#" > nav item </ a > .
        
< ul >
          
< li >< href ="#" > nav item </ a > . </ li >
          
< li >< href ="#" > nav item </ a > . </ li >
        
</ ul >
      
</ li >
      
< li >< href ="#" > nav item </ a > .
        
< ul >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
        
</ ul >
      
</ li >
      
< li >< href ="#" > nav item </ a > .
        
< ul >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
        
</ ul >
      
</ li >
      
< li >< href ="#" > nav item </ a > .
        
< ul >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
          
< li >< href ="#" > nav item </ a ></ li >
        
</ ul >
      
</ li >
    
</ ul >
  
</ li >
  
< li >< href ="#" > nav item </ a > .
    
< ul >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
    
</ ul >
  
</ li >
  
< li >< href ="#" > nav item </ a > .
    
< ul >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
      
< li >< href ="#" > nav item </ a ></ li >
    
</ ul >
  
</ li >
</ ul >
</ body >
</ html >


posted on 2006-12-25 17:16 kelven 阅读(2167) 评论(0)  编辑  收藏 所属分类: JavaScript

只有注册用户登录后才能发表评论。


网站导航: