<!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>下拉及多级弹出式菜单www.aa25.cn</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
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 { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}
ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}
li ul { display:none;}
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>
</ul>
<ul>
<li><a href="">摇滚</a></li>
<li><a href="">纯音乐</a></li>
<li><a href="">古典金曲</a></li>
<li><a href="">电影原声</a></li>
</ul>
</body>
</html>
里边加上了和段js代码，它是用来控制在IE浏览器下显示下拉菜单的，本来li:hover ul这句是可以的，但IE对css的支持还还完善，所以需要借助JS来控制。
分享到：
相关推荐
CSS网页布局入门教程13：下拉及多级弹出式菜单
CSS网页布局入门教程14：纵向下拉及多级弹出式菜单
4.1.3 下拉及多级弹出式菜单 4.1.4 门户网站的导航设计(闪客帝国) 4.2 背景控制 4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景属性缩写 4.2.6 基于背景控制的导航优化 4.3 使用列表元素 ...
我们在常用的电商或者旅游APP中，例如美团，手机淘宝等等，都能够看的到有那种下拉式的二级列表菜单。具体如图所示： ...这一行一点就会弹出对应的下来菜单。 2）下拉菜单是如何实现的呢？，这里我们利用了PopupW
Multi-level Navigation Plugin可以将导航菜单多级显示、下拉显示、弹出式显示！可以将存档、分类、页面、友情链接、评论等作为导航菜单，可以在后台设置界面修改css来达到自己想要的显示效果。 Multi-level ...
收集一些Java 图形用户界面编程实验源码集锦：1.窗口和事件处理。2.容器与布局管理（流式布局FlowLayout）。3.容器与布局管理...17.菜单（弹出式菜单）。18.对话框。 相信这些Jaa实验代码对学习Java编程有帮助。
常用jQuery弹出式链接提示效果Tooltip源码下载 10.相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦 11.简单实用jQuery用于登录弹出层例子代码(带动画的弹出层) 12.综合jquery实现表格隔行换色和鼠标经过...
2.各种频道/栏目菜单显示风格，可显示多级弹出级联菜单 3.多种产品级别显示风格菜单，产品级别可无限级层分类 4.代码全XHTML，方便变换风格，更利于搜索引擎的搜索 5.有各行业风格、韩国风格、欧美风格等提供选择...
2.各种频道/栏目菜单显示风格，可显示多级弹出级联菜单 3.多种产品级别显示风格菜单，产品级别可无限级层分类 4.代码全XHTML，方便变换风格，更利于搜索引擎的搜索 5.有各行业风格、韩国风格、欧美风格等提供选择...
实例052 自动隐藏式菜单 87 实例053 收缩式导航菜单 89 实例054 树状导航菜单 91 第2章 表单及表单元素 95 2.1 文本框/编辑框/隐藏域组件 96 实例055 获取文本框/编辑框/隐藏域的值 96 实例056 自动计算金额 97 实例...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...
1.2 弹出菜单应用实例 实例005 在控件上单击右键弹出菜单 实例006 个性化的弹出菜单 实例007 任务栏托盘弹出菜单 1.3 工具栏应用实例 实例008 带背景的工具栏 实例009 带图标的...