css抽屉菜单

<! doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd </ a > "> 
< html  xmlns ="<a href=" http://www.w3.org/1999/xhtml" target ="_blank" > http://www.w3.org/1999/xhtml </ a > "> 

         < head >  

                 < title > 宜广宣传广告  </ title >  

                 < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />  
                 < meta  name ="title"  content =""   />  
                 < meta  name ="author"  content =""   />  
                 < meta  name ="subject"  content =""   />  
                 < meta  name ="language"  content ="en"   />  
                 < meta  name ="keywords"  content =""   />  
     < style  type ="text/css" >  
   #leftside{}{ float:left; background-color:#00468C; width:150px; margin:0 auto; text-align:center; padding:10px 0;} 
     #leftside.show_about p.about{}{ display:block;} 
     #leftside.meta p.meta{}{ display:block; } 
     #leftside.ads p.ads{}{ display:block;} 
     #leftside a{}{ display:block;} 
           #leftside a{}{ text-decoration:none; color:black;} 
           #leftside a:hover{}{ background:#FFD7EB url(images/common/bb_url.gif) no-repeat 10px center; } 
           #leftside .class1 a:hover{}{ background:#FFD7EB url(images/common/bb_url.gif) no-repeat 10px center;} 

   p.top{}{ background-color:#F9E006; line-height:2;} 
   p.normal{}{ background:#8CC6FF url(images/common/bb_url.gif) no-repeat 10px center; margin:10px; font:16px/1.5 宋体; } 
   p.about,p.meta,p.ads{}{ display:none;} 
   .class1{}{ display:block; margin:10px 20px; background:#fff url(images/common/bb_url.gif) no-repeat 10px center; font:14px/1.5 宋体;} 
    
     

         </ style >  
         < script  language ="JavaScript"  type ="text/javascript" >  
        <!-- 
        shq={}; 
        shq.$=function(o){return typeof(o)=='string'?document.getElementById(o):o} 
        //--> 
         </ script >  
         </ head >  
            
                 < body  onload ="" >  
          < div  id ="leftside" >  
                    < p  class ="top" >   
            < p  class ="normal" >< a  href ="#" > 首页 </ a >  
            < p  class ="normal"  onclick ="shq.$('leftside').className=shq.$('leftside').className==''?'show_about':''" >< a  href ="#" > 关于宣广 </ a >  
                    <!-- 宣广 -->  
                    < p  class ="about class1" >< a  href ="#" > 公司介绍 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 宣广结构 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 宣广优势 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 宣广历程 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 宣广荣誉 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 宣广团队 </ a >  
                    < p  class ="about class1" >< a  href ="#" > 文化交流 </ a >  
                    <!-- 宣广 -->  
            < p  class ="normal" >< a  href ="#" > 公司新闻 </ a >  
            < p  class ="normal" >< a  href ="#" > 服务项目 </ a >  
            < p  class ="normal"  onclick ="shq.$('leftside').className=shq.$('leftside').className==''?'meta':''" >< a  href ="#" > 宣广媒介 </ a >  
                    <!-- 媒介 -->  
                    < p  class ="meta class1" >< a  href ="#" > 独家媒体 </ a >  
                    < p  class ="meta class1" >< a  href ="#" > 其它媒体 </ a >  
                    < p  class ="meta class1" >< a  href ="#" > 快客车载 </ a >  
                    < p  class ="meta class1" >< a  href ="#" > 户外发布 </ a >  
                    <!-- 媒介 -->  
                    < p  class ="normal"  onclick ="shq.$('leftside').className=shq.$('leftside').className==''?'ads':''" >< a  href ="#" > 成功客户 </ a >  
                     <!-- 客户 -->  
                    < p  class ="ads class1" >< a  href ="#" > 客户商标 </ a >  
                    < p  class ="ads class1" >< a  href ="#" > 成功案例 </ a >  
                    <!-- 客户 -->  
                    < p  class ="normal" >< a  href ="#" > 人才招聘 </ a >  
                    < p  class ="normal" >< a  href ="#" > 联系我们 </ a >  
             
                  </ div >  

              < div  id ="right" >  
                  </ div >  

                 </ body >  
         
         </ html >

转载于:https://www.cnblogs.com/xiaojiangjiang/archive/2007/06/07/updown.html