论坛首页 → Java企业应用论坛 →

CSS实现的下拉菜单

浏览 1162 次
锁定老帖子 主题：CSS实现的下拉菜单
该帖已经被评为隐藏帖
作者 正文
  • ganglong99
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 60
  • 来自: 重庆
   发表时间：2008-12-02   最后修改：2008-12-02

     看看这个例子，完全用CSS实现的下拉菜单，没有JavaScript脚本语言控制，比较简单，全是CSS样式的运用！

  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.   <title> new document </title>
  5.   <meta name="generator" content="editplus" />
  6.   <meta name="author" content="" />
  7.   <meta name="keywords" content="" />
  8.   <meta name="description" content="" />
  9.  </head>
  10.   <style>
  12. ul li{
  13. width:100px;
  14. float:left;
  15. }
  16. ul li a{
  17. text-align:center;
  18. border-style:solid;
  19. border-color:black;
  20. border:1px;
  21. position:relative;
  22. display:block;
  23. width:80px;
  24. }
  25. ul li ul li a{
  26. display:block;
  27. background-color:#99FF00;
  28. }
  29. ul li ul li ul li a{
  30. display:block;
  31. background-color:#00FF99;
  32. width:auto;
  33. padding-left:10px;
  34. text-align:left;
  35. }
  36. ul li ul li ul li ul li a{
  37. background-color:#99FFFF;
  38. }
  39. ul li ul li{
  40. position:relative;
  41. left:-40px;
  42. padding-top:0px;
  43. top:0px;
  44. width:80px;
  45. }
  46. ul li ul li ul li{
  47. width:140px;
  48. position:relative;
  49. left:30px;
  51. }
  52. li ul{
  53. display:none;
  54. }
  55. li:hover>ul{
  56. display:block;
  57. }
  58. li:hover ul{
  59. width:80px;
  60. height:150px;
  61. }
  62. li:hover ul li:hover{
  63. position:relative;
  64. height:19px;
  65. }
  66. a:hover{
  67. color:#0099cc;
  68. background-color:white;
  69. }
  70. li:hover ul li:hover ul{
  71. position:relative;
  72. margin-top:-20px;
  73. left:12px;
  75. }
  76. li:hover ul li:hover ul li:hover ul{
  77. position:relative;
  78. left:70px;
  79. }
  82.  </style>
  83.  <body>
  84.  <div id="menu">
  85.   <ul>
  86.     <li><a href="#">服务配置</a>
  87.         <ul>
  88.             <li><a href="#">公共配置</a>                    
  89.                 <ul>
  90.                     <li><a href="#">网关公用主配置表</a></li>    
  91.                     <li><a href="#">本地SP</a></li>
  92.                 </ul>
  93.             </li>    
  94.             <li><a href="#">AGENT</a>                   
  95.                 <ul>
  96.                     <li><a href="#">bbb</a></li>     
  97.                     <li><a href="#">CCccccC</a></li>
  98.                 </ul>
  99.             </li>    
  100.             <li><a href="#">KERNEL</a>                  
  101.                 <ul>
  102.                     <li><a href="#">bbb</a></li>     
  103.                     <li><a href="#">CCccccC</a></li>
  104.                 </ul>
  105.             </li>
  106.         </ul>
  107.     </li>  
  108.     <li><a href="#">报表统计</a>
  109.         <ul>
  110.             <li><a href="#">bbbbb</a></li>   
  111.             <li><a href="#">CCcccc</a>                  
  112.                 <ul>
  113.                     <li><a href="#">bbbbbbbbbbb</a></li>     
  114.                     <li><a href="#">CCccC</a></li>
  115.                 </ul>
  116.             </li>    
  117.             <li><a href="#">CCccccccC</a>                   
  118.                 <ul>
  119.                     <li><a href="#">bbbbbbb</a></li>     
  120.                     <li><a href="#">CCcccC</a></li>      
  121.                     <li><a href="#">CCccccC</a>                 
  122.                         <ul>
  123.                             <li><a href="#">bbbbbb</a></li>  
  124.                             <li><a href="#">CCcccC</a></li>
  125.                         </ul>
  126.                     </li>
  127.                 </ul>
  128.             </li>
  129.         </ul>
  130.     </li>
  131.     <li><a href="#">修改密码</a></li>
  132.     <li><a href="#">网管管理</a>
  133.         <ul>
  134.             <li><a href="#">bbbb</a></li>        
  135.             <li><a href="#">CCcccC</a>                  
  136.                 <ul>
  137.                     <li><a href="#">bbbbbbb</a></li>     
  138.                     <li><a href="#">CCccC</a></li>
  139.                 </ul>
  140.             </li>
  141.             <li><a href="#">CCC</a>                 
  142.                 <ul>
  143.                     <li><a href="#">bbb</a></li>     
  144.                     <li><a href="#">CCcccC</a></li>
  145.                 </ul>
  146.             </li>
  147.         </ul>
  148.     </li>
  149.   </ul>
  150.   </div>
  151.  </body>
  152. </html>
返回顶楼
         
论坛首页 → Java企业应用版

跳转论坛:
Global site tag (gtag.js) - Google Analytics