CSS制作的垂直导航菜单效果.PDFVIP

欢迎访问悠久互联官方网站！ 电话：0755-8372 5558 /138 2655 9696 QQ: 邮箱: cs@ CSS制作的垂直导航菜单效果 script startList = function() { if (document.alldocument.getElementById) { navRoot = document.getElementById(nav); for (i=0; inavRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName==LI) { node.onmouseover=function() { this.className+= over; } node.onmouseout=function() { this.className=this.className.replace( over, ); } } } } } window.onload=startList; /script style body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; page 1 / 3 欢迎访问悠久互联官方网站！ 电话：0755-8372 5558 /138 2655 9696 QQ: 邮箱: cs@ color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ /style ul id=nav lia href=#chinahtml/a/li lia href=#About/a ul lia href=#History/a/li lia href=#Team/a/li lia href=#Offices/a/li /ul /li lia href=#Services/a ul lia href=#Web Design/a/li lia href=#Internet Marketing/a/li lia href=#Hosting/a/li lia href=#Domain N