网页左侧菜单代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "[url=http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd][url=http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd][color=#003a7b][url=[/color][url=http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd][color=#003a7b]http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd[/color][/url]][url=http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd][color=#003a7b]http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd[/color][/url][/url][/url][/url]"><html xmlns="[url=http://www.w3.org/1999/xhtml][url=http://www.w3.org/1999/xhtml][color=#003a7b][url=[/color][url=http://www.w3.org/1999/xhtml][color=#003a7b]http://www.w3.org/1999/xhtml[/color][/url]][url=http://www.w3.org/1999/xhtml][color=#003a7b]http://www.w3.org/1999/xhtml[/color][/url][/url][/url][/url]">
<head>
<meta http-equiv="content-type" c />
<title>nav</title>
<script language="javascript">
// javascript document
startlist = function() {
if (document.all && document.getelementbyid) {
navroot = document.getelementbyid("nav");
for (i=0; i<navroot.childnodes.length; i++) {
node = navroot.childnodes;
if (node.nodename=="li") {
node.onmouseover=function() {
this.classname+=" over";
}
node.onmouseout=function() {
this.classname=this.classname.replace(" over", "");
}
}
}
}
}
window.onload=startlist;
</script>
<style type="text/css">
<!--
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;
color: #777;
background: #fff; /* ie6 bug */
padding: 5px;
border: 1px solid #ccc; /* ie6 bug */
border-bottom: 0;
}
/* holly hack. ie requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* end */
li:hover ul, li.over ul { display: block; } /* the magic */
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a>
<ul>
<li><a href="#">history</a></li>
<li><a href="#">team</a></li>
<li><a href="#">offices</a></li>
</ul>
</li>
<li><a href="#">services</a>
<ul>
<li><a href="#">web design</a></li>
<li><a href="#">internet marketing</a></li>
<li><a href="#">hosting</a></li>
<li><a href="#">domain names</a></li>
<li><a href="#">broadband</a></li>
</ul>
</li>
<li><a href="#">contact us</a>
<ul>
<li><a href="#">united kingdom</a></li>
<li><a href="#">france</a></li>
<li><a href="#">usa</a></li>
<li><a href="#">australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
演示地址:[url=http://www.oyaya.net/attachments/left-menu.htm][url=http://www.oyaya.net/attachments/left-menu.htm][color=#003a7b]http://www.oyaya.net/attachments/left-menu.htm[/color][/url][/url] 学习了，楼主辛苦了！！！
页:
[1]