css设置的下拉菜单[网页特效]-CSS代码特效

有什么问题请到评论中发表<br> <!-- http://www.mb5u.com/jscode --> <!-- bbs http://www.mb5u.com/bbs--> <!-- 把下列代码加入到head区内 --> <style type="text/css"> #cssdropdown, #cssdropdown ul { padding: 0; margin: 0; list-style: none; } #cssdropdown li { float: left; position: relative; } .mainitems{ border: 1px solid black; background-color: #FFEEC6; } .mainitems a{ margin-left: 6px; margin-right: 8px; text-decoration: none; } .subuls{ display: none; width: 10em; position: absolute; top: 1.2em; left: 0; background-color: lightyellow; border: 1px solid black; } .subuls li{ width: 100%; } .subuls li a{ text-decoration: underline; } #cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; } #cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block; } #restofcontent { /*wrap rest of content of the page inside this div*/ clear: left; } </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { cssdropdownRoot = document.getElementById("cssdropdown"); for (i=0; i<cssdropdownRoot.childNodes.length; i++) { node = cssdropdownRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } if (window.attachEvent) window.attachEvent("onload", startList) else window.onload=startList; //--><!]]></script> <!-- 把下列代码加入到body区内 --> <ul id="cssdropdown"> <li class="mainitems"> <a href="http://www.mb5u.com">CSS Gallery</a> <ul class="subuls"> <li><a href="">Gordon Mac</a></li> <li><a href="">Juiced Thoughts</a></li> <li><a href="">The Daily Flight</a></li> <li><a href="">GrapeFruit</a></li> </ul> </li> <li class="mainitems"> <a href="http://www.mb5u.com/">CSS Examples</a> <ul class="subuls" style="width: 15em"> <li><a href="">CSS2 Generated Content</a></li> <li><a href="">Custom scrollbar colors</a></li> <li><a href="">Markerless and "no indent" Lists</a></li> </ul> </li> </ul> WWW.MB5U_COM

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]