Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Menu CSS ở phía đỉnh
URL: https://www.javascriptbank.com/css-top-menu.html
Một đoạn mã JavaScript khác để tạo trình đơn hai cấp ở phía đỉnh của trang web.
Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Menu CSS ở phía đỉnh
URL: https://www.javascriptbank.com/css-top-menu.html
<style type="text/css">#csstopmenu, #csstopmenu ul{padding: 0;margin: 0;list-style: none;text-align: left;}#csstopmenu li{float: left;position: relative;}#csstopmenu a{text-decoration: none;}.mainitems{border: 1px solid black;border-left-width: 0;background-color: #D8FE89;}.headerlinks a{margin: auto 8px;font-weight: bold;color: black;}.submenus{display: none;width: 10em;position: absolute;top: 1.2em;left: 0;background-color: #EEFFCC;border: 1px solid black;}.submenus li{width: 100%;}.submenus li a{display: block;width: 100%;text-indent: 3px;}html>body .submenus li a{ /* non IE browsers */width: auto;}.submenus li a:hover{background-color: yellow;color: black;}#csstopmenu li>ul {/* non IE browsers */top: auto;left: auto;}#csstopmenu li:hover ul, li.over ul {display: block;}html>body #clearmenu{ /* non IE browsers */height: 3px;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">// CSS Top Menu- By javascriptbank.com (http://www.javascriptbank.com)// Adopted from SuckerFish menu// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptbank.com/// Please keep this credit intactstartMenu = function() {if (document.all&&document.getElementById) {cssmenu = document.getElementById("csstopmenu");for (i=0; i<cssmenu.childNodes.length; i++) {node = cssmenu.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", startMenu)elsewindow.onload=startMenu;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><ul id="csstopmenu"><li class="mainitems" style="border-left-width: 1px"><div class="headerlinks"><a href="http://www.javascriptbank.com">JavaScript Kit</a></div><ul class="submenus"><li><a href="http://javascriptbank.com/">Home</a></li><li><a href="http://javascriptbank.com">Free JavaScripts</a></li><li><a href="http://javascriptbank.com">JavaScript tutorials</a></li><li><a href="http://javascriptbank.com">JavaScript Reference</a></li></ul></li><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptbank.com">2nd Menu Item</a></div><ul class="submenus" style="width: 14em"><li><a href="">Sub 2 Item 1. Long text, long menu.</a></li><li><a href="">Sub 2 Item 2</a></li><li><a href="">Sub 2 Item 3.</a></li></ul></li><li class="mainitems"><div class="headerlinks"><a href="http://www.javascriptbank.com">3rd Menu Item</a></div><ul class="submenus"><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li><li><a href="">Sub 3 Item 1</a></li></ul></li></ul><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->