鼠标指向显示次级菜单

鼠标指向显示次级菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />powered by 25175.net
<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[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 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>

【内容导航】
第1页：完全用CSS实现的中英文双语导航菜单(经典)	第2页：商业风格的CSS垂直菜单
第3页：突起的导航栏效果[经典]	第4页：点击显示的FAQ菜单效果[经典]
第5页：一款DIV+CSS闪动导航条效果(经典)	第6页：非常酷的CSS菜单效果B(经典)
第7页：非常酷的CSS菜单效果A（经典）	第8页：会旋转的菜单导航（经典）
第9页：带项目描述的导航菜单（经典）	第10页：聚合的导航菜单效果（经典）
第11页：整合在IE中的导航条（经典）	第12页：含下拉菜单的绿色导航条
第13页：关联菜单（连动菜单）	第14页：可拖动的导航菜单
第15页：多级滚动菜单	第16页：微软导航菜单
第17页：鼠标移到文字上自动展开	第18页：点击渐显的导航菜单
第19页：随机网站推荐脚本	第20页：网站内快捷键导航
第21页：左侧导航菜单类似按钮	第22页：可移动的导航栏
第23页：页面顶部多级导航栏	第24页：浮动、隐藏的导航菜单
第25页：上下弹动的导航条	第26页：鼠标指向显示次级菜单
第27页：漂亮的仿flash菜单	第28页：滑动的层作菜单导航
第29页：精彩的跳动菜单效果	第30页：类似与QQ的好友/黑名单之类的树型菜单
第31页：定时改变标题栏的内容

菜单导航集合

鼠标指向显示次级菜单