<div class="codetitle"> <span><a style="CURSOR: pointer" data="15783" class="copybut" id="copybut15783" onclick="doCopy('code15783')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code15783"> <br>contentType="text/html;charset=utf-8" %> <br><br> <br> <br><title>WebForm5</title> <br><br><style>/* Root = Horizontal, Secondary = Vertical */ <BR>ul#navmenu-h { <BR>margin: 0; <BR>border: 0 none; <BR>padding: 0; <BR>width: 500px; /*For KHTML*/ <BR>list-style: none; <BR>height: 24px; <BR>} <br><br>ul#navmenu-h li { <BR>margin: 0; <BR>border: 0 none; <BR>padding: 0; <BR>float: left; /*For Gecko*/ <BR>display: inline; <BR>list-style: none; <BR>position: relative; <BR>height: 24px; <BR>} <br><br>ul#navmenu-h ul { <BR>margin: 0; <BR>border: 0 none; <BR>padding: 0; <BR>width: 160px; <BR>list-style: none; <BR>display: none; <BR>position: absolute; <BR>top: 24px; <BR>left: 0; <BR>} <br><br>ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{ <BR>clear: both; <BR>display: block; <BR>font: 1px/0px serif; <BR>content: "."; <BR>height: 0; <BR>visibility: hidden; <BR>} <br><br>ul#navmenu-h ul li { <BR>width: 160px; <BR>float: left; /*For IE 7 lack of compliance*/ <BR>display: block !important; <BR>display: inline; /*For IE*/ <BR>} <br><br>/* Root Menu */ <BR>ul#navmenu-h a { <BR>border: 1px solid #FFF; <BR>border-right-color: #CCC; <BR>border-bottom-color: #CCC; <BR>padding: 0 6px; <BR>float: none !important; /*For Opera*/ <BR>float: left; /*For IE*/ <BR>display: block; <BR>background: #EEE; <BR>color: #666; <BR>font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; <BR>text-decoration: none; <BR>height: auto !important; <BR>height: 1%; /*For IE*/ <BR>} <br><br>/* Root Menu Hover Persistence */ <BR>ul#navmenu-h a:hover, <BR>ul#navmenu-h li:hover a, <BR>ul#navmenu-h li.iehover a { <BR>background: #CCC; <BR>color: #FFF; <BR>} <br><br>/* 2nd Menu */ <BR>ul#navmenu-h li:hover li a, <BR>ul#navmenu-h li.iehover li a { <BR>float: none; <BR>background: #EEE; <BR>color: #666; <BR>} <br><br>/* 2nd Menu Hover Persistence */ <BR>ul#navmenu-h li:hover li a:hover, <BR>ul#navmenu-h li:hover li:hover a, <BR>ul#navmenu-h li.iehover li a:hover, <BR>ul#navmenu-h li.iehover li.iehover a { <BR>background: #CCC; <BR>color: #FFF; <BR>} <br><br>/* 3rd Menu */ <BR>ul#navmenu-h li:hover li:hover li a, <BR>ul#navmenu-h li.iehover li.iehover li a { <BR>background: #EEE; <BR>color: #666; <BR>} <br><br>/* 3rd Menu Hover Persistence */ <BR>ul#navmenu-h li:hover li:hover li a:hover, <BR>ul#navmenu-h li:hover li:hover li:hover a, <BR>ul#navmenu-h li.iehover li.iehover li a:hover, <BR>ul#navmenu-h li.iehover li.iehover li.iehover a { <BR>background: #CCC; <BR>color: #FFF; <BR>} <br><br>/* 4th Menu */ <BR>ul#navmenu-h li:hover li:hover li:hover li a, <BR>ul#navmenu-h li.iehover li.iehover li.iehover li a { <BR>background: #EEE; <BR>color: #666; <BR>} <br><br>/* 4th Menu Hover */ <BR>ul#navmenu-h li:hover li:hover li:hover li a:hover, <BR>ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { <BR>background: #CCC; <BR>color: #FFF; <BR>} <br><br>ul#navmenu-h ul ul, <BR>ul#navmenu-h ul ul ul { <BR>display: none; <BR>position: absolute; <BR>top: 0; <BR>left: 160px; <BR>} <br><br>/* Do Not Move - Must Come Before display:block for Gecko */ <BR>ul#navmenu-h li:hover ul ul, <BR>ul#navmenu-h li:hover ul ul ul, <BR>ul#navmenu-h li.iehover ul ul, <BR>ul#navmenu-h li.iehover ul ul ul { <BR>display: none; <BR>} <br><br>ul#navmenu-h li:hover ul, <BR>ul#navmenu-h ul li:hover ul, <BR>ul#navmenu-h ul ul li:hover ul, <BR>ul#navmenu-h li.iehover ul, <BR>ul#navmenu-h ul li.iehover ul, <BR>ul#navmenu-h ul ul li.iehover ul { <BR>display: block; <BR>} <br><br></style> <script language="javascript"> <BR>navHover = function() { <BR>var lis = document.getElementById("navmenu-h").getElementsByTagName("LI"); <BR>for (var i=0; i<lis.length; i++) { <BR>lis[i].onmouseover=function() { <BR>this.className+=" iehover"; <BR>} <BR>lis[i].onmouseout=function() { <BR>this.className=this.className.replace(new RegExp(" iehover\\b"), <br><br>""); <BR>} <BR>} <BR>} <BR>if (window.attachEvent) window.attachEvent("onload", navHover); <BR></script> <br> <br> <br><ul id="navmenu-h"> <br><li> <a href="#">Root nav item1</a> <br><ul> <br><li><a href="#">Sub nav item1</a></li> <br><li><a href="#">Sub nav item1-2</a></li> <br> </ul> <br> </li> <br><li> <a href="#">Root nav item2</a> <br><ul> <br><li><a href="#">Sub nav item2</a></li> <br><li><a href="#">Sub nav item2-2</a></li> <br> </ul> <br> </li> <br><li> <a href="#">Root nav item3</a> <br><ul> <br><li><a href="#">Sub nav item3</a></li> <br><li><a href="#">Sub nav item3-2</a></li> <br> </ul> <br> </li> <br> </ul> <br> <br> <br> </div>