纯CSS圆角折叠菜单

竖直排列的圆角折叠菜单,纯CSS折叠菜单,不需要鼠标点击即可展开二级菜单,当然也可以修改成点击展开那种。

  1. <title>CSS圆角折叠菜单</title>
  2. <style type="text/css">
  3. #menu {
  4.    font-size:12px;
  5.    height:380px;
  6.    margin:0;
  7.    padding:0;
  8.    width:180px;
  9.    overflow:hidden;
  10.    background:#f0f0f0;
  11.    list-style:none;
  12.    border-left:1px solid #DDD;
  13.    border-right:1px solid #DDD;
  14. }
  15. #menu li a {
  16.    display:block;
  17.    text-decoration:none;
  18.    color:#00b;
  19.    margin:0;
  20.    width:100%;
  21.    }
  22. #menu li a span {
  23.    display:none;
  24.    color:#000;
  25.    height:120px
  26.    }
  27. #menu li a.one span {
  28.    display:block;
  29.    margin:0 10px;
  30. }
  31. #menu li a:hover {
  32.    background:#f1f1f1;
  33.    }
  34. #menu li a:hover span {
  35.    display:block;
  36.    margin:0 10px;
  37.    cursor:pointer;
  38. }
  39. #menu .h2 {
  40.    margin:0 5px;
  41.    padding:0;
  42.    color:#808;
  43.    font-variant:small-caps;
  44.    border:0;
  45.    }
  46. #menu .h3 {
  47.    margin:0 5px;
  48.    padding:0;
  49.    color:#00b;
  50.    }
  51. .curved {
  52.    width:180px;
  53.    margin:0 auto;
  54.    }
  55. .curved .b1, .curved .b2, .curved .b3, .curved .b4   {
  56.    font-size:1px;
  57.    display:block;
  58.    background:#88c;
  59.    overflow: hidden;
  60.    }
  61. .curved .b1, .curved .b2, .curved .b3 {
  62.    height:1px;
  63. }
  64. .curved .b2, .curved .b3, .curved .b4 {
  65.    background:#f0f0f0;
  66.    border-left:1px solid #DDD;
  67.    border-right:1px solid #DDD;
  68.    }
  69. .curved .b1 {
  70.    margin:0 4px;
  71.    background:#DDD;
  72.    }
  73. .curved .b2 {
  74.    margin:0 2px;
  75.    border-width:0 2px;
  76.    }
  77. .curved .b3 {
  78.    margin:0 1px;
  79.    }
  80. .curved .b4 {
  81.    height:2px;
  82.    margin:0px;
  83.    }
  84. </style>
  85. <div class="curved">
  86. <b class="b1 c1">
  87. </b>
  88. <b class="b2 c2">
  89. </b>
  90. <b class="b3 c3">
  91. </b>
  92. <b class="b4 c4" ></b>
  93.    <ul id="menu">
  94.      <li>
  95.       <a   href="/">
  96.        <b class="h2">ASP CODE</b><br />
  97.       <span>ASP源代码分享区,精品ASP源代码供初学者学习研究,希望你喜欢!</span>
  98.       </a>
  99.      </li>
  100.      <li>
  101.       <a href="#nogo">
  102.        <b class="b1"></b>
  103.        <b class="b2"></b>
  104.        <b class="h2">HP CODE</b><br />
  105.        <span>HP代码分享区,我们一起交流进步提高!</span>
  106.       </a>
  107.      </li>
  108.      <li>
  109.       <a href="#nogo">
  110.        <b class="b1"></b>
  111.        <b class="b2"></b>
  112. <b class="h2">JSP CODE</b><br />
  113. <span>JSP代码学习区,热烈欢迎您的加盟。</span>
  114.      </a>
  115.      </li>
  116. </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>
复制代码
运行代码看效果在这里:纯CSS圆角折叠菜单-竖直排列的菜单
你的网站都挂了,哈哈哈