您的位置：首页 > Web前端 > CSS

CSS伪类的又一个小应用，实现下拉菜单

2012-08-09 15:08 239 查看

实现思路：

菜单包含在一个div中，div的高度为30px，菜单长度为120px。设置div的overflow为hidden。

这样菜单的剩余90px的内容被隐藏了。

当hover的时候，把div的overflow值设为visible。这样，剩余的90px内容就可见。

演示代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <style type="text/css"> 
  5.         .tdiv  
  6.         {  
  7.             width: 100px;  
  8.             height: 30px;  
  9.             overflow: hidden;  
  10.             text-align: center;  
  11.             background: red;  
  12.         }  
  13.         .tdiv:hover  
  14.         {  
  15.             overflow: visible;  
  16.               
  17.         }  
  18.     </style> 
  19. </head> 
  20. <body> 
  21.     <div class="tdiv"> 
  22.         <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
  23.             Menu1</div> 
  24.         <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
  25.             Menu2</div> 
  26.         <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
  27.             Menu3</div> 
  28.         <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
  29.             Menu4</div> 
  30.     </div> 
  31. </body> 
  32. </html> 


 


阅读更多
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航