首页 » 技术 » 网络 » 前端 » 纯CSS实现Dropdown Menu(导航子菜单)

纯CSS实现Dropdown Menu(导航子菜单)

1. CSS部分代码

  1. *      
  2.         {      
  3.             margin: 0;      
  4.             padding: 0;      
  5.         }      
  6.         .dropDownMenu      
  7.         {      
  8.             font-size12px;      
  9.             positionrelative;      
  10.             z-index: 100;      
  11.         }      
  12.         .dropDownMenu ul      
  13.         {      
  14.             list-stylenone;      
  15.         }      
  16.         .dropDownMenu li      
  17.         {      
  18.     floatleft;      
  19.     positionrelative;      
  20.     font-familyVerdana, Geneva, sans-serif;      
  21.         }      
  22.         .dropDownMenu ul ul      
  23.         {      
  24.             visibilityhidden;      
  25.             positionabsolute;      
  26.             left3px;      
  27.             top23px;      
  28.         }      
  29.         .dropDownMenu table      
  30.         {      
  31.             positionabsolute;      
  32.             top: 0;      
  33.             left: 0;      
  34.         }      
  35.         .dropDownMenu ul li:hover ul, .dropDownMenu ul a:hover ul      
  36.         {      
  37.             visibilityvisible;      
  38.         }      
  39.         .dropDownMenu a      
  40.         {      
  41.             displayblock;      
  42.             border1px solid #aaa;      
  43.             backgroundred;      
  44.             padding2px 10px;      
  45.             margin3px;      
  46.             color#fff;      
  47.             text-decorationnone;      
  48.         }      
  49.         .dropDownMenu a:hover      
  50.         {      
  51.             background#f2cdb0;      
  52.             color#f00;      
  53.             border1px solid red;      
  54.         }      
  55.         .dropDownMenu ul ul      
  56.         {      
  57.         }      
  58.         .dropDownMenu ul ul li      
  59.         {      
  60.             clearboth;      
  61.             text-alignleft;      
  62.             font-size12px;      
  63.         }      
  64.         .dropDownMenu ul ul li a      
  65.         {      
  66.             displayblock;      
  67.             width100px;      
  68.             height13px;      
  69.             margin: 0;      
  70.             border: 0;      
  71.             border-bottom1px solid red;      
  72.         }      
  73.         .dropDownMenu ul ul li a:hover      
  74.         {      
  75.             border: 0;      
  76.             background#f2cdb0;      
  77.             border-bottom1px solid #fff;      
  78.         }  

2. HTML部分代码

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />  
  5.     <title>纯CSS实现Dropdown Menu</title>  
  6.     <link rel=“stylesheet” type=“text/css” media=“all” href=“style.css” />  
  7.   
  8. </head>  
  9. <body>  
  10.     <div class=“dropDownMenu”>  
  11.         <ul>  
  12.             <li><a href=“”>CSS Dropdown Menu Test   
  13.                 <!–[if IE 7]><!–>  
  14.             </a>  
  15.                 <!–<![endif]–>  
  16.                 <!–[if lte IE 6]><table><tr><td><![endif]–>  
  17.               <ul>  
  18.                     <li><a href=“#”>Standard</a></li>  
  19.                     <li><a href=“#”>Teach</a></li>  
  20.                     <li><a href=“#”>Tech.</a></li>  
  21.                     <li><a href=“#”>Question</a></li>  
  22.                     <li><a href=“#”>CSS Menu</a></li>  
  23.                     <li><a href=“#”>Dashboard</a></li>  
  24.                 </ul>  
  25.                 <!–[if lte IE 6]></td></tr></table></a><![endif]–>  
  26.             </li>  
  27.         </ul>  
  28.     </div>  
  29.     <br />  
  30.     <br />  
  31. </body>  
  32. </html>  

Comments are currently closed.