简洁的双级导航菜单,推荐!
<P>把如下代码复制到<head>与</head>之间</P><P><script language="javascript"><BR>// JavaScript Document</P>
<P>startList = function() {<BR>if (document.all&&document.getElementById) {<BR>navRoot = document.getElementById("nav");<BR>for (i=0; i<navRoot.childNodes.length; i++) {<BR>node = navRoot.childNodes[i];<BR>if (node.nodeName=="LI") {<BR>node.onmouseover=function() {<BR>this.className+=" over";<BR> }<BR> node.onmouseout=function() {<BR> this.className=this.className.replace(" over", "");<BR> }<BR> }<BR> }<BR> }<BR>}<BR>window.onload=startList;<BR></script><BR><style type="text/css"><BR><!--<BR>body {<BR> font: normal 11px verdana;<BR> }</P>
<P>ul {<BR> margin: 0;<BR> padding: 0;<BR> list-style: none;<BR> width: 150px; /* Width of Menu Items */<BR> border-bottom: 1px solid #CCC;<BR> }<BR> <BR>ul li {<BR> position: relative;<BR> }<BR> <BR>li ul {<BR> position: absolute;<BR> left: 149px; /* Set 1px less than menu width */<BR> top: 0;<BR> display: none;<BR> }</P>
<P>/* Styles for Menu Items */<BR>ul li a {<BR> display: block;<BR> text-decoration: none;<BR> color: #777;<BR> background: #fff; /* IE6 Bug */<BR> padding: 5px;<BR> border: 1px solid #ccc; /* IE6 Bug */<BR> border-bottom: 0;<BR> }<BR> <BR>/* Holly Hack. IE Requirement \*/<BR>* html ul li { float: left; height: 1%; }<BR>* html ul li a { height: 1%; }<BR>/* End */</P>
<P>li:hover ul, li.over ul { display: block; } /* The magic */<BR>--><BR></style></P>
<P>把如下代码复制到<body>与</body>之间</P>
<P><ul id="nav"> <BR> <li><a href="#">Home</a></li> <BR> <li><a href="#">About</a> <BR> <ul> <BR> <li><a href="#">History</a></li> <BR> <li><a href="#">Team</a></li> <BR> <li><a href="#">Offices</a></li> <BR> </ul> <BR> </li> <BR> <li><a href="#">Services</a> <BR> <ul> <BR> <li><a href="#">Web Design</a></li> <BR> <li><a href="#">Internet Marketing</a></li> <BR> <li><a href="#">Hosting</a></li> <BR> <li><a href="#">Domain Names</a></li> <BR> <li><a href="#">Broadband</a></li> <BR> </ul> <BR> </li> <BR> <li><a href="#">Contact Us</a> <BR> <ul> <BR> <li><a href="#">United Kingdom</a></li> <BR> <li><a href="#">France</a></li> <BR> <li><a href="#">USA</a></li> <BR> <li><a href="#">Australia</a></li> <BR> </ul> <BR> </li> <BR></ul> </P> <P>没有看到什么效果</P> 学习了/:yy80
上海DHL快递
**** 作者被禁止或删除 内容自动屏蔽 ****页:
[1]