提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>相容主流瀏覽器，純CSS下拉式功能表</title><style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;list-style-type: none;}.menu ul li {float:left;position:relative;}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:139px; height:3em; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#dfc184; padding-left:10px; line-height:3em;}* html .menu ul li a, .menu ul li a:visited {width:149px;width:139px;}.menu ul li ul {display: none;}table {margin:-1px; border-collapse:collapse;font-size:1em;}/* specific to non IE browsers */.menu ul li:hover a {color:#fff; background:#bd8d5e;}.menu ul li:hover ul {display:block; position:absolute; top:3em;margin-top:1px;left:0; width:150px;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000; height:auto; line-height:1.2em; padding:5px 10px; width:129px}.menu ul li:hover ul li a.drop {background:#c9c9a7;}.menu ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0;width:150px;}.menu ul li:hover ul li:hover ul.left {left:-150px;}</style><!--[if lte IE 6]><style type="text/css">.menu ul li a:hover {color:#fff; background:#bd8d5e;}.menu ul li a:hover ul {display:block; position:absolute; top:3em; left:0;background:#fff;margin-top:0;margin-top:1px;}.menu ul li a:hover ul li a {display:block; background:#dbe4ab; color:#000; height:auto; line-height:1.5em; padding:5px 10px; width:150px;width:129px;}.menu ul li a:hover ul li a.drop {background:#c9c9a7;}.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; width:0;}.menu ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0; color:#000;left:150px;}.menu ul li a:hover ul li a:hover ul.left {left:-150px;}</style><![endif]--></head><body><div class="menu"><ul><li><a class="drop" href="http://www.111cn.net/">DEMOS<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>zero dollars advertising page</li> <li>wrapping text around images</li> <li>styled form</li> <li>active focus</li> <li><a class="drop" href="http://www.111cn.net/" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>styled form</li> <li>removing active/focus borders</li> <li>hover/click</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li class="upone">shadow boxing</li> <li>image map for detailed information</li> <li>fun with background images</li> <li>fade scrolling</li> <li>em image sizes compared</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>BOXES<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>a coded list of spies</li> <li>vertical menu</li> <li>enlarging unordered list</li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> <li>circular links</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>MOZILLA<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>drop down menu</li> <li>cascading menu</li> <li>content:</li> <li>mozzie box</li> <li>I can build a rainbow with transparent borders</li> <li>a snooker cue using border art</li> <li>target practise</li> <li>two tone headings</li> <li>shadow text</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>EXPLORER<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>the first example for Internet Explorer</li> <li>weft fonts</li> <li>vertically aligning text</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>OPACITY<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>a colour wheel using opaque colours</li> <li>a menu using opacity</li> <li>partial opacity</li> <li>partial opacity II</li> <li><a class="drop" href="http://www.111cn.net/" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul class="left"> <li>styled form</li> <li>removing active/focus borders</li> <li>hover/click</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--> </li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li></ul></div></body></html>
提示：您可以先修改部分代碼再運行
