<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>停靠在左边的隐藏菜单</title> </head> <mce:style type="text/css"><!-- body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } .menu {position:absolute; z-index:100; margin-top:20px;} .menu ul {padding:0; margin:0; list-style-type: none; height:170px;} .menu ul li {width:35px; text-align:left;} * html .menu ul li {width:235px; margin-left:-16px; mar/gin-left:0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(/jscss/demoimg/200904/tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;} * html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w/idth:15px; he/ight:80px;} table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;} .menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;} .menu ul li:hover {position:relative;} .menu ul li:hover a {padding-left:200px;} .menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; z-index:300;} .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(/jscss/demoimg/200904/fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w/idth:180px;} .menu ul li:hover ul li a.last, .menu ul li a:hover ul li a.last {border-bottom:1px solid #000;} .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;} .some_text {padding:0 20px 0 50px;} --></mce:style><style type="text/css" mce_bogus="1"> body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } .menu {position:absolute; z-index:100; margin-top:20px;} .menu ul {padding:0; margin:0; list-style-type: none; height:170px;} .menu ul li {width:35px; text-align:left;} * html .menu ul li {width:235px; margin-left:-16px; mar/gin-left:0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(/jscss/demoimg/200904/tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;} * html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w/idth:15px; he/ight:80px;} table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;} .menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;} .menu ul li:hover {position:relative;} .menu ul li:hover a {padding-left:200px;} .menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;} .menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible; z-index:300;} .menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(/jscss/demoimg/200904/fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w/idth:180px;} .menu ul li:hover ul li a.last, .menu ul li a:hover ul li a.last {border-bottom:1px solid #000;} .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;} .some_text {padding:0 20px 0 50px;}</style> <body> <div class="menu"> <ul> <li><a href="/" mce_href="">D E M O S<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td> <ul> <li><a href="/" mce_href="" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="/" mce_href="" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="/" mce_href="" title="Styling forms">styled form</a></li> <li><a href="/" mce_href="" title="fade-out scrolling">fade scrolling</a></li> <li><a class="last" href="/" mce_href="" title="em size images compared">em image sizes compared</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> </li> <li><a href="index.html" mce_href="index.html">B O X E S<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td> <ul> <li><a href="/" mce_href="" title="a coded list of spies">a coded list of spies</a></li> <li><a href="/" mce_href="" title="a horizontal vertical menu">vertical menu</a></li> <li><a class="last" href="/" mce_href="" title="circular links">circular links</a></li> <li><a href="/" mce_href="" title="a horizontal vertical menu">vertical menu</a></li> <li><a class="last" href="/" mce_href="" title="circular links">circular links</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> <div class="some_text"> </div> </body> </html>