CSS偽類的又一個小應用，實現下拉選單

技術小甜發表於2017-11-16
CSS

實現思路：

選單包含在一個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. 

  2. 
<html xmlns=“http://www.w3.org/1999/xhtml”> 

    3. 

  3. 
<head> 

    4. 

  4. 
    <style type=“text/css”> 

    5. 

  5.         .tdiv  
    6. 

  6.         {  
    7. 

  7.             width: 100px;  
    8. 

  8.             height: 30px;  
    9. 

  9.             overflow: hidden;  
    10. 

  10.             text-align: center;  
    11. 

  11.             background: red;  
    12. 

  12.         }  
    13. 

  13.         .tdiv:hover  
    14. 

  14.         {  
    15. 

  15.             overflow: visible;  
    16. 

  16.               
    17. 

  17.         }  
    18. 

  18. 
    </style> 

    19. 

  19. 
</head> 

    20. 

  20. 
<body> 

    21. 

  21. 
    <div class=“tdiv”> 

    22. 

  22. 
        <div style=“width: 100px; height: 30px; background: green; text-align: center;”> 

    23. 

  23. 
            Menu1</div> 

    24. 

  24. 
        <div style=“width: 100px; height: 30px; background: green; text-align: center;”> 

    25. 

  25. 
            Menu2</div> 

    26. 

  26. 
        <div style=“width: 100px; height: 30px; background: green; text-align: center;”> 

    27. 

  27. 
            Menu3</div> 

    28. 

  28. 
        <div style=“width: 100px; height: 30px; background: green; text-align: center;”> 

    29. 

  29. 
            Menu4</div> 

    30. 

  30. 
    </div> 

    31. 

  31. 
</body> 

    32. 

  32. 
</html> 

    33. 



 































本文轉自cnn23711151CTO部落格，原文連結：http://blog.51cto.com/cnn237111/959338 ，如需轉載請自行聯絡原作者














相關文章