<!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 { 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下显示不正确的问题aa25.cn*/
* 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>
为了实现导航中的子导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。
里边加上了和段js代码，它是用来控制在IE浏览器下显示下拉菜单的，本来li:hover ul这句是可以的，但IE对css的支持还还完善，所以需要借助JS来控制。
分享到：
相关推荐
### CSS网页布局入门教程14：纵向下拉及多级弹出式菜单 #### 教程概述 本教程是CSS网页布局系列教程的第14部分，主要介绍如何使用CSS来创建纵向下拉及多级弹出式菜单。通过本教程的学习，读者将能够掌握制作复杂的...
最后，"纵向下拉及多级弹出式菜单"部分进一步扩展了导航菜单设计，讲解了如何在垂直方向上展示下拉菜单，适用于那些需要更复杂导航结构的网站。 总的来说，这套《CSS网页布局入门教程》涵盖了网页设计的核心概念，...
7. **下拉及多级弹出式菜单**：`CSS网页布局入门教程13：下拉及多级弹出式菜单.doc`和`CSS网页布局入门教程14：纵向下拉及多级弹出式菜单.doc`则讲解了如何创建交互式的下拉菜单，这对于大型网站的导航非常有用，...
《CSS网站布局实录》章节主要探讨了如何利用CSS技术来构建网站的布局，包括横向导航、纵向导航以及下拉及多级弹出式菜单的设计方法。 4.1 用CSS设计网站导航 在网页设计中，导航是用户与网站交互的关键部分，CSS...
ZoneMenu是基于jQuery的一款高效、简洁的多级弹出菜单插件。它的主要特点是只占用页面上较小的空间，但能够创建丰富的多级菜单结构，提供用户友好的交互体验。通过简单的HTML、CSS和JavaScript代码，开发者可以快速...
- **下拉及多级弹出式菜单**：教程13和14深入讲解了下拉菜单的制作，包括多级弹出，这在大型网站中极为常见，提高用户的导航效率。 4. **网页标准版式布局**： - **div+css模板下载**：在“div+css网页标准版式...
常用jQuery弹出式链接提示效果Tooltip源码下载 10.相当牛的jQuery动感TipBox,鼠标移上去会动的提示框哦 11.简单实用jQuery用于登录弹出层例子代码(带动画的弹出层) 12.综合jquery实现表格隔行换色和鼠标经过...
教程04至10分别涵盖了各种不同的设计风格和功能实现，如创建下拉式菜单（Dave-woods）、横向动画标签（Dynamicdrive）、从上到下的横向菜单（Aplus.rs）、弹性导航（Icant）、以及支持横向和纵向切换的菜单（Qrayg）...
3. **对话框（Dialog）**：提供弹出式窗口，常用于显示详细信息或进行操作确认。 4. **表单（Form）**：EasyUI 支持创建复杂的表单，包括各种输入控件，如文本框、选择框、日期选择器等，并能处理表单验证。 5. **...
1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10 侧导航条设计 86 实例052 自动隐藏...
它可以被定制为横向、纵向或弹出式菜单，支持图标、快捷键和自定义事件，使用户能更直观地访问网站功能。 4. **dhtmlxTabbar**：此控件提供了分页功能，用户可以在多个标签页之间切换。dhtmlxTabbar支持动态添加和...
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 使用列表元素 ...
5. **菜单（Menu）**: 菜单组件允许创建多级导航结构，可以是横向或纵向布局，支持鼠标悬停展开子菜单，适用于构建应用程序的主菜单或工具栏。 6. **按钮（Button）**: 按钮组件提供了各种样式和功能，如普通按钮、...
- 包括查找字段点击某列值的下拉按钮弹出一个从数据库取值下拉列表的功能，提高了数据录入的效率。 - 支持模糊查询，增强了数据检索能力。 - 实现了增量搜索，提高了数据搜索的响应速度。 - **输入/输出** - ...
修改扩展界面支持库三，解决单击卷帘菜单后导致日期框不能弹出下拉窗口的BUG。 4. 修改XP风格支持库，解决GDI资源泄露，以及在使用通用组件库六时组合框标题出现重影的BUG。 5. 修改扩展界面支持库一，解决树形框...