１. 比较宽松的HTML格式，样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
如下面的Menu 样式
<style type="text/css"> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; margin: 0; margin: 50px 0; z-index: 9997; } #ReportViewerControl_ctl10 { height: 100% !important; width: 100% !important; position: relative !important; overflow:scroll !important; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding: 0; margin: 0; z-index: 9998; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float: left; position: relative; } .menu ul li a, .menu ul li a:visited { display: block; text-align: left; padding-left: 4px; text-decoration: none; width: 320px; height: 30px; color: #000; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #c9c9a7; line-height: 30px; font-size: 11px; } .menu ul li:hover a { color: #fff; background: #b3ab79; font-weight: normal; } .menu ul li ul { position: absolute; z-index:1000; display: none; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display: block; position: absolute; top: 31px; left: 0; width: 105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display: block; background: #faeec7; color: #000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background: #dfc184; color: #000; } .ta { z-index:1; } </style> <!--[if lte IE 7]> <style type="text/css"> .menu { position:relative; z-index:999; } </style> <![endif]--> <!--[if lte IE 6]> <style type="text/css"> /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } </style> <![endif]--> <td width='320px'> <div class="menu"> <ul> <li><a class="hide" href="#" id='dis'>Test</a> <ul> <li><a href="#</a> </li> <li><a href="#">Test11</a> </li> <li><a href="#">Test22</a> </li> <li><a href="#">Test33</a> </li> <li><a href="#">Test44</a> </li> <li><a href="#">Test55</a> </li> <li><a href="#">Test66</a> </li> <li><a href="#">Test77</a> </li> <li><a href="#">Test88</a> </li> <li><a href="#">Test99</a> </li> </ul> </li> </ul> </div> <div class="clear"> </div> </td>
２．比较严格，CSS脚本没有反应
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
