CSS擬似クラスのもう一つの小さい応用、ドロップダウンメニューを実現する

5186 ワード

css 疑似クラス

実現構想:
メニューは1つのdivに含まれ、divの高さは30 px、メニュー長は120 pxである.divのoverflowをhiddenに設定します.
このようにメニューの残りの90 pxの内容は隠されている.
hoverの場合、divのoverflow値をvisibleに設定します.これにより、残りの90 pxコンテンツが表示されます.
デモコードは次のとおりです.


  
  
  
  
   
   
   
   <!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> 
   
   
   
       <style type="text/css"> 
   
   
   
           .tdiv  
   
   
   
           {  
   
   
   
               width: 100px;  
   
   
   
               height: 30px;  
   
   
   
               overflow: hidden;  
   
   
   
               text-align: center;  
   
   
   
               background: red;  
   
   
   
           }  
   
   
   
           .tdiv:hover  
   
   
   
           {  
   
   
   
               overflow: visible;  
   
   
   
                 
   
   
   
           }  
   
   
   
       </style> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <div class="tdiv"> 
   
   
   
           <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
   
   
   
               Menu1</div> 
   
   
   
           <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
   
   
   
               Menu2</div> 
   
   
   
           <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
   
   
   
               Menu3</div> 
   
   
   
           <div style="width: 100px; height: 30px; background: green; text-align: center;"> 
   
   
   
               Menu4</div> 
   
   
   
       </div> 
   
   
   
   </body> 
   
   
   
   </html>

AutoMapper-ベストプラクティス

HTMLで<br>タブの<br>よこほうこうはいち