<p class="sycode"> <html> <br> <br> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br> <title>CSS圆角折れ叠菜单</title> <br> <style type="text/css"> <br> #menu { <br> font-size:12px; <br> 高さ:380ピクセル; <br> マージン:0; <br> パディング:0; <br> 幅:180ピクセル; <br> オーバーフロー:非表示; <br> 背景:#f0f0f0; <br> リストスタイル:なし; <br> border-left:1px ソリッド #DDD; <br> border-right:1px ソリッド #DDD; <br> } <br> #menu li a { <br> display:block; <br> テキスト装飾: なし; <br> カラー:#00b; <br> マージン:0; <br> 幅:100%; <br> } <br> #menu li a span { <br> display:none; <br> カラー:#000; <br> height:120px <br> } <br> #menu li a.one span { <br> display:block; <br> マージン:0 10px; <br> } <br> #menu li a:hover { <br> background:#f1f1f1; <br> } <br> #menu li a:hover span { <br> display:block; <br> マージン:0 10px; <br> カーソル:ポインタ; <br> } <br> #menu .h2 { <br> margin:0 5px; <br> パディング:0; <br> カラー:#808; <br> font-variant:small-caps; <br> ボーダー:0; <br> } <br> #menu .h3 { <br> margin:0 5px; <br> パディング:0; <br> カラー:#00b; <br> } <br> .curved { <br> width:180px; <br> マージン:0 自動; <br> } <br> .curved .b1、.curved .b2、.curved .b3、.curved .b4 { <br> font-size:1px; <br> 表示:ブロック; <br> 背景:#88c; <br> オーバーフロー: 非表示。 <br> } <br> .curved .b1、.curved .b2、.curved .b3 { <br> height:1px; <br> } <br> .curved .b2、.curved .b3、.curved .b4 { <br> background:#f0f0f0; <br> border-left:1px ソリッド #DDD; <br> border-right:1px ソリッド #DDD; <br> } <br> .curved .b1 { <br> margin:0 4px; <br> 背景:#DDD; <br> } <br> .curved .b2 { <br> margin:0 2px; <br> border-width:0 2px; <br> } <br> .curved .b3 { <br> margin:0 1px; <br> } <br> .curved .b4 { <br> height:2px; <br> マージン:0px; <br> } <br> </style> <br> </head> <br> <br> <div class="curved"> <br> <b class="b1 c1"> <br> </b> <br> <b class="b2 c2"> <br> </b> <br> <b class="b3 c3"> <br> </b> <br> <b class="b4 c4" ></b> <br> <ul id="メニュー"> <br> </p> <li> <br> <a href="/"> <br> <b class="h2">ASP.net</b><br /> <br> <span>内容1</span> <br> </a> <br> </li> <br> </li> <li> <br> <a href="#nogo"> <br> <b class="b1"></b> <br> <b class="b2"></b> <br> <b class="h2">sql</b><br /> <br> <span>内容2</span> <br> </a> <br> </li> <br> </li> <li> <br> <a href="#nogo"> <br> <b class="b1"></b> <br> <b class="b2"></b> <br> <b class="h2">アクセス</b><br /> <br><span>内容3</span> <br> </a> <br> </li> <br> </ul><b class="b4"></b><b class="b3"></b><b class="b2"></b> ;<b class="b1"></b></div> <br> <div><A href="http://www.999jiijiu.com/"> http://www.999jiujiu.com/</A></div> <br> </body> <br> </html> </li>
