本文介绍了一个兼容IE浏览器的二级横向菜单系统实现方案。通过JavaScript和CSS样式，该菜单能够在鼠标悬停时展开二级菜单，并针对IE浏览器进行了特别优化。
一个可以兼容ie和iff的二级横向菜单系统
<!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=gb2312" /><title>下拉纵向及多级弹出式菜单</title>
<script type="text/javascript">...
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>...ul {...}{ margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}ul li {...}{ position:relative;}li ul {...}{ position:absolute; left:119px; top:0; display:none;}ul li a {...}{ width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}ul li a:hover {...}{ background-color:#ddd;}/**//*解决ul在IE下显示不正确的问题*/* html ul li {...}{ float:left; height:1%;}* html ul li a {...}{ height:1%;}/**//* end */li:hover ul,li.over ul {...}{ display:block;}</style></head><body><ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a></li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">FLASH教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">BLOG</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> <li><a href="">摇滚</a></li> <li><a href="">纯音乐</a></li> <li><a href="">古典金曲</a></li> <li><a href="">电影原声</a></li></ul></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
