漂亮的透明css菜单 下拉效果

<! 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 > 漂亮的透明css菜单 </ title >
< style  type ="text/css" >
#wrapper 
{ width : 750px ;  margin : 0 auto ; }
#background 
{ width : 750px ;  height : 440px ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/model3.jpg) ;  padding-top : 10px ; }
#menu2 
{ padding : 0 ;  width : 750px ;  margin : 0 ;  list-style : none ;  height : 28px ;  position : relative ;  z-index : 500 ;  font-family : arial, verdana, sans-serif ;  background : #000 ;  border-bottom : 1px solid #edb ; }
#menu2 li.top 
{ display : block ;  float : left ; }
#menu2 li a.top_link 
{ display : block ;  height : 25px ;  float : left ;  line-height : 22px ;  font-size : 11px ;  font-weight : bold ;  padding : 0 20px 0 10px ;  color : #edb ;  text-decoration : none ;  border-top : 3px solid #000 ; }
#menu2 li a.top_link:hover 
{ color : #d85 ;  border-color : #a52 ; }
#menu2 li:hover > a.top_link 
{ color : #d85 ;  border-color : #a52 ; }
#menu2 table 
{ border-collapse : collapse ;  width : 0 ;  height : 0 ;  position : absolute ;  top : 0 ;  left : 0 ; }
/*  Default link styling  */
/*  Style the list OR link hover. Depends on which browser is used  */
#menu2 a:hover 
{ visibility : visible ;  position : relative ;  z-index : 200 ; }
#menu2 li:hover 
{ position : relative ;  z-index : 200 ; }
/*  keep the 'next' level invisible by placing it off screen.  */
#menu2 ul, 
#menu2 :hover ul ul, 
#menu2 :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul ul 
{ position : absolute ;  left : -9999px ;  top : -9999px ;  height : 0 ;  margin : 0 ;  padding : 0 ;  list-style : none ; }
#menu2 :hover ul.sub 
{ left : 0 ;  top : 25px ;  white-space : nowrap ;  width : 120px ;  height : auto ;  z-index : 300 ;  padding-top : 5px ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/trans.gif) ; }
#menu2 :hover ul.sub li 
{ display : block ;  float : left ;  width : 100% ;  height : 25px ; }
#menu2 :hover ul.sub li span 
{ display : block ;  height : 25px ;  float : left ;  width : 90px ;  font-weight : normal ; }
#menu2 :hover ul.sub li label
{ display : block ;  height : 25px ;  float : left ;  width : 30px ;  font-weight : normal ; }
#menu2 :hover ul.sub li a 
{ display : block ;  position : relative ;  font-size : 11px ;  height : 25px ;  width : 120px ;  margin-right : -30px ;  line-height : 25px ;  text-indent : 10px ;  color : #edb ;  text-decoration : none ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/trans.gif) ; }
#menu2 :hover ul.sub li span a:hover 
{ color : #f97 ; }
#menu2 :hover ul.sub li:hover > span a 
{ color : #f97 ; }
#menu2 :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{ left : 120px ;  top : 0 ;  white-space : nowrap ;  width : 120px ;  z-index : 400 ;  height : auto ; }
#menu2 :hover ul.wide 
{ width : 150px ; }
#menu2 :hover ul.wide li span 
{ width : 120px ; }
#menu2 :hover ul.wide li a 
{ width : 150px ; }
#menu2 :hover ul.narrow 
{ width : 90px ; }
#menu2 :hover ul.narrow li span 
{ width : 60px ; }
#menu2 :hover ul.narrow li a 
{ width : 90px ; }
#menu2 :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{ left : 90px ; }
#menu2 li > span 
{
background
:  url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midleft.png) ;
}
#menu2 li >label
{
background
:  url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midright.png)
}
#menu2 li.fly >label
{
background
:  url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-midright-sub.png)
}
#menu2 li.subtop > span,
#menu2 li.flytop > span 
{  
background
: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topleft.png) ;
}
#menu2 li.subtop >label
{
background
: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topright.png) ;
}
#menu2 li.flytop >label
{
background
: url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-topright-sub.png) ;
}
#menu2 li.subbot > span,
#menu2 li.flybot > span 
{
height
: 35px !important ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botleft.png) ;
}
#menu2 li.subbot >label
{
height
: 35px !important ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botright.png) ;
}
#menu2 li.flybot >label
{
height
: 35px !important ;  background : url(http://www.stunicholls.myby.co.uk/pro_drop12/tab-botright-sub.png) ;
}
</ style >
<!-- [if lte IE 6]>

<![endif]
-->
</ head >
< body >
< h2 > 3D menu series </ h2 >
< ul  id ="menu2" >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Home </ a ></ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Contacts <!-- [if gte IE 7]><! --> </ a > <!-- <![endif] -->
  
<!-- [if lte IE 6]><table><tr><td><![endif] -->
  
< ul  class ="sub" >
   
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Support </ a ></ span >< label ></ label ></ li >
   
< li  class ="fly" >< span >< href ="http://www.cnblogs.com/joe235/" > Sales <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
    
<!-- [if lte IE 6]><table><tr><td><![endif] -->
    
< ul >
     
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > USA </ a ></ span >< label ></ label ></ li >
     
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Canadian </ a ></ span >< label ></ label ></ li >
     
< li >< span >< href ="http://www.cnblogs.com/joe235/" > South American </ a ></ span >< label ></ label ></ li >
     
< li  class ="fly" >< span >< href ="http://www.cnblogs.com/joe235/" > European <!-- [if IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
      
<!-- [if lte IE 6]><table><tr><td><![endif] -->
      
< ul  class ="narrow" >
       
< li  class ="flytop" >< span >< href ="http://www.cnblogs.com/joe235/" > British <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
        
<!-- [if lte IE 6]><table><tr><td><![endif] -->
        
< ul  class ="narrow" >
         
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > London </ a ></ span >< label ></ label ></ li >
         
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Liverpool </ a ></ span >< label ></ label ></ li >
         
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Glasgow </ a ></ span >< label ></ label ></ li >
         
< li  class ="fly" >< span >< href ="http://www.cnblogs.com/joe235/" > Bristol <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
          
<!-- [if lte IE 6]><table><tr><td><![endif] -->
          
< ul  class ="narrow" >
           
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Redland </ a ></ span >< label ></ label ></ li >
           
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Hanham </ a ></ span >< label ></ label ></ li >
           
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Eastville </ a ></ span >< label ></ label ></ li >
          
</ ul >
          
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
         
</ li >
         
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Cardiff </ a ></ span >< label ></ label ></ li >
         
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Belfast </ a ></ span >< label ></ label ></ li >
        
</ ul >
        
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
       
</ li >
       
< li >< span >< href ="http://www.cnblogs.com/joe235/" > French </ a ></ span >< label ></ label ></ li >
       
< li >< span >< href ="http://www.cnblogs.com/joe235/" > German </ a ></ span >< label ></ label ></ li >
       
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Spanish </ a ></ span >< label ></ label ></ li >
      
</ ul >
      
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
     
</ li >
     
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Australian </ a ></ span >< label ></ label ></ li >
     
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Asian </ a ></ span >< label ></ label ></ li >
    
</ ul >
    
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
   
</ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Buying </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Photographers </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Stockist </ a ></ span >< label ></ label ></ li >
   
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > General </ a ></ span >< label ></ label ></ li >
  
</ ul >
  
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
 
</ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Services <!-- [if gte IE 7]><! --> </ a > <!-- <![endif] -->
  
<!-- [if lte IE 6]><table><tr><td><![endif] -->
  
< ul  class ="sub" >
   
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Printing </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Photo Framing </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Retouching </ a ></ span >< label ></ label ></ li >
   
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Archiving </ a ></ span >< label ></ label ></ li >
  
</ ul >
  
<!-- [if lte IE 6]></td></tr></table></a><![endif] -->
 
</ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Products <!-- [if gte IE 7]><! --> </ a > <!-- <![endif] -->
  
<!-- [if lte IE 6]><table><tr><td><![endif] -->
  
< ul  class ="sub" >
   
< li  class ="flytop" >< span >< href ="http://www.cnblogs.com/joe235/" > Cameras <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
     
<!-- [if lte IE 6]><table><tr><td><![endif] -->
     
< ul  class ="narrow" >
      
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Nikon </ a ></ span >< label ></ label ></ li >
      
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Minolta </ a ></ span >< label ></ label ></ li >
      
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Pentax </ a ></ span >< label ></ label ></ li >
     
</ ul >
     
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
   
</ li >
   
< li  class ="fly" >< span >< href ="http://www.cnblogs.com/joe235/" > Lenses <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
     
<!-- [if lte IE 6]><table><tr><td><![endif] -->
     
< ul >
      
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Wide Angle </ a ></ span >< label ></ label ></ li >
      
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Standard </ a ></ span >< label ></ label ></ li >
      
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Telephoto </ a ></ span >< label ></ label ></ li >
      
< li  class ="fly" >< span >< href ="http://www.cnblogs.com/joe235/" > Zoom <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
       
<!-- [if lte IE 6]><table><tr><td><![endif] -->
       
< ul >
        
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > 35mm to 125mm </ a ></ span >< label ></ label ></ li >
        
< li >< span >< href ="http://www.cnblogs.com/joe235/" > 50mm to 250mm </ a ></ span >< label ></ label ></ li >
        
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > 125mm to 500mm </ a ></ span >< label ></ label ></ li >
       
</ ul >
       
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
      
</ li >
      
< li >< span >< href ="../boxes/" > Mirror </ a ></ span >< label ></ label ></ li >
      
< li  class ="flybot" >< span >< href ="http://www.cnblogs.com/joe235/" > Non standard <!-- [if gte IE 7]><! --> </ a ></ span >< label ></ label > <!-- <![endif] -->
       
<!-- [if lte IE 6]><table><tr><td><![endif] -->
       
< ul >
        
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Bayonet mount </ a ></ span >< label ></ label ></ li >
        
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Screw mount </ a ></ span >< label ></ label ></ li >
       
</ ul >
       
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
      
</ li >
     
</ ul >
     
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
   
</ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Flash Guns </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Tripods </ a ></ span >< label ></ label ></ li >
   
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Filters </ a ></ span >< label ></ label ></ li >
  
</ ul >
  
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
 
</ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Where to find us <!-- [if gte IE 7]><! --> </ a > <!-- <![endif] -->
  
<!-- [if lte IE 6]><table><tr><td><![endif] -->
  
< ul  class ="sub wide" >
   
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Travelling by car or rail </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Using public transport </ a ></ span >< label ></ label ></ li >
   
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Our place on the map </ a ></ span >< label ></ label ></ li >
  
</ ul >
  
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
 
</ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Shop <!-- [if gte IE 7]><! --> </ a > <!-- <![endif] -->
  
<!-- [if lte IE 6]><table><tr><td><![endif] -->
  
< ul  class ="sub narrow" >
   
< li  class ="subtop" >< span >< href ="http://www.cnblogs.com/joe235/" > Online </ a ></ span >< label ></ label ></ li >
   
< li >< span >< href ="http://www.cnblogs.com/joe235/" > Catalogue </ a ></ span >< label ></ label ></ li >
   
< li  class ="subbot" >< span >< href ="http://www.cnblogs.com/joe235/" > Mail Order </ a ></ span >< label ></ label ></ li >
  
</ ul >
  
<!-- [if lte IE 6]></td></tr></table></a></span><label></label><![endif] -->
 
</ li >
 
< li  class ="top" >< href ="http://www.cnblogs.com/joe235/"  id ="privacy"  class ="top_link" > Privacy Policy </ a ></ li >
</ ul >
< img  src ="http://www.stunicholls.myby.co.uk/pro_drop12/model3.jpg"  alt ="model"  title ="model"   />
</ body >
</ html >

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值