用CSS打造可摺疊伸縮名片菜單

代碼如下

複製代碼

<style type="text/css"> <!-- #menu {   font-size:12px;   height:380px;   margin:0;   padding:0;   width:180px;   overflow:hidden;   background:#f0f0f0;   list-style:none;   border-left:1px solid #cccccc;   border-right:1px solid #cccccc; } #menu li a {   display:block;   text-decoration:none;   color:#00b;   margin:0;   width:100%;   } #menu li a span {   display:none;   color:#000;   height:120px   } #menu li a.one span {   display:block;   margin:0 10px; } #menu li a:hover {   background:#f1f1f1;   } #menu li a:hover span {   display:block;   margin:0 10px;   cursor:pointer; } #menu .h2 {   margin:0 5px;   padding:0;   color:#808;   font-variant:small-caps;   border:0;   } #menu .h3 {   margin:0 5px;   padding:0;   color:#00b;   } .curved {   width:180px;   margin:0 auto;   } .curved .b1, .curved .b2, .curved .b3, .curved .b4  {   font-size:1px;   display:block;   background:#88c;   overflow: hidden;   } .curved .b1, .curved .b2, .curved .b3 {   height:1px; } .curved .b2, .curved .b3, .curved .b4 {   background:#f0f0f0;   border-left:1px solid #cccccc;   border-right:1px solid #cccccc;   } .curved .b1 {   margin:0 4px;   background:#cccccc;   } .curved .b2 {   margin:0 2px;   border-width:0 2px;   } .curved .b3 {   margin:0 1px;   } .curved .b4 {   height:2px;   margin:0px;   } --> </style> <div class="curved"><b class="b1 c1"></b><b class="b2 c2"></b><b class="b3 c3"></b><b class="b4 c4" ></b>  <ul id="menu">    <li>     <a  href="#nogo">      <b class="h2">網頁陶吧 ONE</b><br />      <b class="h3">http://homepage./</b>      <span>      WEB標準 是 結構（Structure） 、表現（Presentation） 和 行為（Behavior） 三方面構成的標準集合      </span>     </a>    </li>    <li>     <a href="#nogo">      <b class="b1"></b>      <b class="b2"></b>      <b class="b3"></b>      <b class="b4"></b>      <b class="h2">網頁陶吧 TWO</b><br />      <b class="h3">http://homepage./</b>      <span>      WEB標準 是 結構（Structure） 、表現（Presentation） 和 行為（Behavior） 三方面構成的標準集合      </span>     </a>    </li>    <li>     <a href="#nogo">      <b class="b1"></b>      <b class="b2"></b>      <b class="b3"></b>      <b class="b4"></b>      <b class="h2">網頁陶吧 THREE</b><br />      <b class="h3">http://homepage./</b>      <span>    WEB標準 是 結構（Structure） 、表現（Presentation） 和 行為（Behavior） 三方面構成的標準集合      </span>     </a>    </li>    <li>     <a href="#nogo">      <b class="b1"></b>      <b class="b2"></b>      <b class="b3"></b>      <b class="b4"></b>      <b class="h2">網頁陶吧 FOUR</b><br />      <b class="h3">http://homepage./</b>      <span>      WEB標準 是 結構（Structure） 、表現（Presentation） 和 行為（Behavior） 三方面構成的標準集合      </span>     </a>    </li>    <li>     <a class="one" href="#nogo">      <b class="b1"></b>      <b class="b2"></b>      <b class="b3"></b>      <b class="b4"></b>      <b class="h2">網頁陶吧 FIVE</b><br />      <b class="h3">http://homepage./</b>      <span>      WEB標準 是 結構（Structure） 、表現（Presentation） 和 行為（Behavior） 三方面構成的標準集合     </span>     </a>   </li> </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div>