|
以下是一个兼容IE和火狐的三级导航菜单，用javascript实现的，先预览下效果；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT知道网_www.itwis.com－－兼容IE和FF的三级导航菜单>
<style type="text/css" media="screen">
<!--
#Nav { /*Make the left border */
width: auto;
float: left;
border-left: 1px solid #777;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
/*display: inline;*/
}
ul li {
position: relative;
width: 90px;
float: left;
}
li ul {
position: absolute;
left: 0px;
top: 23px;
display: none;
border-bottom: 1px solid #777;
border-left: 0px;
}
ul li a {
display: block;
font-size: 12px;
line-height: 22px;
text-decoration: none;
color: #333;
background-color: #FFF;
height: 22px;
padding-left: 8px;
border: 1px solid #777;
border-left: 0px;
}
ul li ul li a { /* The border of main menus is different from the sub menus */
border: 1px solid #777;
border-bottom: 0px;
}
a:hover {
color: #F60;
background-color: #EFEFEF;
}
/* Fix IE. Hide from IE Mac */
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
/* End */
li:hover ul, li.over ul {
display: block;
}
#Menu li.over ul {
display: block;
}
#Menu li.over li ul {
margin-left: 89px;
margin-top: -10px;
display: none;
}
#Menu li li.over ul {
display: block;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
startList = function() {
var menuRoot = document.getElementById("Menu").getElementsByTagName("li");;
for (var i=0; i<menuRoot.length; i++) {
menuRoot[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "over";
}
menuRoot[i].onmouseout=function() {
this.className=this.className.replace("over", "");
}
}
}
window.onload = startList;
-->
</script>
</head>
<body>
<div id="Nav">
<ul id="Menu">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a>
<ul>
<li><a href="#">国内新闻</a>
<ul>
<li><a href="#">娱乐新闻</a></li>
</ul>
</li>
<li><a href="#">国外新闻</a>
<ul>
<li><a href="#">娱乐新闻</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">产品展示</a>
<ul>
<li><a href="#">分类1</a>
<ul>
<li><a href="#">分类1-1</a></li>
</ul>
</li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
</ul>
</li>
<li><a href="#">产品展示1</a>
<ul>
<li><a href="#">分类1</a>
<ul>
<li><a href="#">分类1-1</a></li>
</ul>
</li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
</ul>
</li>
<li><a href="#">产品展示2</a>
<ul>
<li><a href="#">分类1</a>
<ul>
<li><a href="#">分类1-1</a></li>
</ul>
</li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
</ul>
</li>
<li><a href="#">产品展示3</a>
<ul>
<li><a href="#">分类1</a>
<ul>
<li><a href="#">分类1-1</a></li>
</ul>
</li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
</ul>
</li>
<li><a href="#">产品展示4</a>
<ul>
<li><a href="#">分类1</a>
<ul>
<li><a href="#">分类1-1</a></li>
</ul>
</li>
<li><a href="#">分类2</a></li>
<li><a href="#">分类3</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例分类1</a>
<ul>
<li><a href="#">案例分类1-1</a></li>
</ul>
</li>
<li><a href="#">案例分类2</a></li>
<li><a href="#">案例分类3</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
<li><a href="#">留言咨询</a>
<ul>
<li><a href="#">查看留言</a></li>
<li><a href="#">签写留言</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
注：如果在浏览器下显示有乱码，请设置您的浏览器的编码格式
| 
