纯css导航下拉菜单代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 纯CSS的下拉菜单，支持IE6 IE7 Firefox </ title >   
< style  type ="text/css" >   
* { margin : 0 ; padding : 0 ; }    
.menu { font-size : 9pt ; position : relative ; z-index : 100 ; }    
.menu ul { list-style : none ; }    
.menu li  { float : left ; position : relative ; }    
.menu ul ul  { visibility : hidden ; position : absolute ; left : 3px ; top : 23px ; }    
.menu table  { position : absolute ;  top : 0 ;  left : 0 ; }    
.menu ul li:hover ul,   
.menu ul a:hover ul { visibility : visible ; }    
.menu a { display : block ; border : 1px solid #555 ; background : #cacaca ; padding : 2px 10px ; margin : 3px ; color : #fff ; text-decoration : none ; }    
.menu a:hover { background : #666 ; color : #fff ; border : 1px solid #000 ; }    
.menu ul ul {}    
.menu ul ul li  { clear : both ; text-align : left ; font-size : 12px ; }    
.menu ul ul li a { display : block ; width : 100px ; height : 15px ; margin : 0 ; border : 0 ; border-bottom : 1px solid #858585 ; }    
.menu ul ul li a:hover { border : 0 ; background : #666 ; border-bottom : 1px solid #fff ; }    
</ style >   
</ head >   
< body >   
< div  class ="menu" >   
           < ul >   
               < li >< a  href ="#" > CSS教程
                   <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->   
                   <!-- [if lte IE 6]><table><tr><td><![endif] -->   
                   < ul >   
                       < li >< a  href ="#" > WEV标准 </ a ></ li >   
                       < li >< a  href ="#" > 技术文章 </ a ></ li >   
                       < li >< a  href ="#" > 布局实例 </ a ></ li >   
                       < li >< a  href ="#" > 教程专题 </ a ></ li >
                   </ ul >   
                   <!-- [if lte IE 6]></td></tr></table></a><![endif] -->   
               </ li >   
               < li >< a  href ="#" > 艺术欣赏
                   <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->   
                   <!-- [if lte IE 6]><table><tr><td><![endif] -->   
                   < ul >   
                       < li >< a  href ="#" > 经典外站 </ a ></ li >   
                       < li >< a  href ="#" > 配色研究 </ a ></ li >   
                   </ ul >   
                   <!-- [if lte IE 6]></td></tr></table></a><![endif] -->   
               </ li >   
               < li >< a  href ="#" > Javascript   
                   <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->   
                   <!-- [if lte IE 6]><table><tr><td><![endif] -->   
                   < ul >   
                       < li >< a  href ="#" > JSON </ a ></ li >   
                       < li >< a  href ="#" > EXTJS </ a ></ li >   
                   </ ul >   
                   <!-- [if lte IE 6]></td></tr></table></a><![endif] -->   
               </ li >   
               < li >< a  href ="#" > DOM </ a ></ li >   
               < li >< a  href ="#" > XML </ a ></ li >   
               < li >< a  href ="#" > 正则表达式   
                   <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->   
                   <!-- [if lte IE 6]><table><tr><td><![endif] -->   
                   < ul >   
                       < li >< a  href ="#" > 正则表达式简介 </ a ></ li >   
                       < li >< a  href ="#" > 正则表达式之道 </ a ></ li >   
                   </ ul >   
                   <!-- [if lte IE 6]></td></tr></table></a><![endif] -->   
               </ li >   
               < li >< a  href ="#" > 网站优化 </ a ></ li >   
               < li >< a  href ="#" > 电脑网络 </ a ></ li >   
               < li >< a  href ="#" > 建站技术   
                   <!-- [if IE 7]><! --> </ a > <!-- <![endif] -->   
                   <!-- [if lte IE 6]><table><tr><td><![endif] -->   
                   < ul >   
                       < li >< a  href ="#" > PHP </ a ></ li >   
                       < li >< a  href ="#" > JSP </ a ></ li >   
                       < li >< a  href ="#" > ASP.NET </ a ></ li >   
                   </ ul >   
                   <!-- [if lte IE 6]></td></tr></table></a><![endif] -->   
               </ li >   
           </ ul >   
</ div >   
</ body >   
</ html >

转载于:https://www.cnblogs.com/ac1985482/archive/2009/08/05/a20090805.html