用CSS打造可折叠伸缩名片菜单

核心提示：现看看其CSS样式表代码： 以下是引用片段：<style type="text/css"><!--#menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hid

现看看其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.yesky.com/</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.yesky.com/</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.yesky.com/</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.yesky.com/</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.yesky.com/</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>

<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.yesky.com/</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.yesky.com/</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.yesky.com/</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.yesky.com/</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.yesky.com/</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>