漂亮的透明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 >

head >
< body >
< h2 > 3D menu series h2 >
< ul  id ="menu2" >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Home a > li >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Contacts a >
  
   < ul  class ="sub" >
    < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Support a > span >< label > label > li >
    < li  class ="fly" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Sales a > span >< label > label >
    
     < ul >
      < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > USA a > span >< label > label > li >
      < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Canadian a > span >< label > label > li >
      < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > South American a > span >< label > label > li >
      < li  class ="fly" >< span >< a  href ="http://www.cnblogs.com/joe235/" > European a > span >< label > label >
      
       < ul  class ="narrow" >
        < li  class ="flytop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > British a > span >< label > label >
        
         < ul  class ="narrow" >
          < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > London a > span >< label > label > li >
          < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Liverpool a > span >< label > label > li >
          < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Glasgow a > span >< label > label > li >
          < li  class ="fly" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Bristol a > span >< label > label >
          
           < ul  class ="narrow" >
            < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Redland a > span >< label > label > li >
            < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Hanham a > span >< label > label > li >
            < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Eastville a > span >< label > label > li >
           ul >
          
          li >
          < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Cardiff a > span >< label > label > li >
          < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Belfast a > span >< label > label > li >
         ul >
        
        li >
        < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > French a > span >< label > label > li >
        < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > German a > span >< label > label > li >
        < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Spanish a > span >< label > label > li >
       ul >
      
      li >
      < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Australian a > span >< label > label > li >
      < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Asian a > span >< label > label > li >
     ul >
    
    li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Buying a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Photographers a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Stockist a > span >< label > label > li >
    < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > General a > span >< label > label > li >
   ul >
  
  li >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Services a >
  
   < ul  class ="sub" >
    < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Printing a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Photo Framing a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Retouching a > span >< label > label > li >
    < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Archiving a > span >< label > label > li >
   ul >
  
  li >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Products a >
  
   < ul  class ="sub" >
    < li  class ="flytop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Cameras a > span >< label > label >
     
      < ul  class ="narrow" >
       < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Nikon a > span >< label > label > li >
       < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Minolta a > span >< label > label > li >
       < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Pentax a > span >< label > label > li >
      ul >
     
    li >
    < li  class ="fly" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Lenses a > span >< label > label >
     
      < ul >
       < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Wide Angle a > span >< label > label > li >
       < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Standard a > span >< label > label > li >
       < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Telephoto a > span >< label > label > li >
       < li  class ="fly" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Zoom a > span >< label > label >
       
        < ul >
         < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > 35mm to 125mm a > span >< label > label > li >
         < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > 50mm to 250mm a > span >< label > label > li >
         < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > 125mm to 500mm a > span >< label > label > li >
        ul >
       
       li >
       < li >< span >< a  href ="../boxes/" > Mirror a > span >< label > label > li >
       < li  class ="flybot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Non standard a > span >< label > label >
       
        < ul >
         < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Bayonet mount a > span >< label > label > li >
         < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Screw mount a > span >< label > label > li >
        ul >
       
       li >
      ul >
     
    li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Flash Guns a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Tripods a > span >< label > label > li >
    < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Filters a > span >< label > label > li >
   ul >
  
  li >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Where to find us a >
  
   < ul  class ="sub wide" >
    < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Travelling by car or rail a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Using public transport a > span >< label > label > li >
    < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Our place on the map a > span >< label > label > li >
   ul >
  
  li >
  < li  class ="top" >< a  href ="http://www.cnblogs.com/joe235/"  class ="top_link" > Shop a >
  
   < ul  class ="sub narrow" >
    < li  class ="subtop" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Online a > span >< label > label > li >
    < li >< span >< a  href ="http://www.cnblogs.com/joe235/" > Catalogue a > span >< label > label > li >
    < li  class ="subbot" >< span >< a  href ="http://www.cnblogs.com/joe235/" > Mail Order a > span >< label > label > li >
   ul >
  
  li >
  < li  class ="top" >< a  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 >