<!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网页布局入门教程14：纵向下拉及多级弹出式菜单 #### 教程概述 本教程是CSS网页布局系列教程的第14部分，主要介绍如何使用CSS来创建纵向下拉及多级弹出式菜单。通过本教程的学习，读者将能够掌握制作复杂的...
接着，我们为下拉菜单设置绝对定位，以便它们可以从父级li下方弹出，同时设置宽度、背景颜色和阴影效果。取消二级li的浮动，以保持菜单项垂直排列。最后，为二级菜单的链接添加内边距和分隔线，并移除最后一个菜单项...
移动设备上，弹出式菜单可能表现为下拉列表或者模态对话框。在iOS中，可以使用`UIPopoverController`（针对iPad）或`UIActionSheet`（针对iPhone）；在Android中，可以使用`PopupMenu`类；对于React Native或...
最后，"纵向下拉及多级弹出式菜单"部分进一步扩展了导航菜单设计，讲解了如何在垂直方向上展示下拉菜单，适用于那些需要更复杂导航结构的网站。 总的来说，这套《CSS网页布局入门教程》涵盖了网页设计的核心概念，...
在Flash AS3.0中，弹出式下拉菜单是一种常见的交互设计，它允许用户从一个主选项中选择多个相关选项。这样的设计广泛应用于网页、应用程序和游戏等场景，为用户提供方便的操作界面。本篇文章将深入探讨如何在AS3.0中...
7. **下拉及多级弹出式菜单**：`CSS网页布局入门教程13：下拉及多级弹出式菜单.doc`和`CSS网页布局入门教程14：纵向下拉及多级弹出式菜单.doc`则讲解了如何创建交互式的下拉菜单，这对于大型网站的导航非常有用，...
"最好的CSS+JS多级弹出菜单"是一个高效且灵活的解决方案，尤其适用于那些需要展示复杂层级结构的网站。这个菜单系统支持横向和下拉两种布局方式，能够轻松应对多级导航需求，并且设置简单，易于集成到各种网页项目中...
《CSS网站布局实录》章节主要探讨了如何利用CSS技术来构建网站的布局，包括横向导航、纵向导航以及下拉及多级弹出式菜单的设计方法。 4.1 用CSS设计网站导航 在网页设计中，导航是用户与网站交互的关键部分，CSS...
- **下拉及多级弹出式菜单**：教程13和14深入讲解了下拉菜单的制作，包括多级弹出，这在大型网站中极为常见，提高用户的导航效率。 4. **网页标准版式布局**： - **div+css模板下载**：在“div+css网页标准版式...
总的来说，“下拉菜单弹出插件”是一个实用的前端工具，它简化了多级导航的实现，提升了网站的导航效率，同时通过灵活的配置适应各种设计需求。开发者可以通过理解和应用这个插件，提升自己的网页交互设计能力。
在本资源中，"CSS3带有多级下拉菜单的弹性展开下拉动画效果源码.zip" 提供了一个使用纯CSS3实现的多级下拉菜单，并带有弹性展开的动画效果。这个源码可以帮助开发者创建交互性更强、用户体验更佳的网站导航菜单。...
例如，当用户鼠标悬停在菜单项上时，下拉菜单会弹出；当鼠标离开时，下拉菜单会自动隐藏。 3. **CSS样式和动画**：为了实现“动态弹性”效果，项目可能使用了CSS3的`transition`和`transform`属性来平滑地改变下拉...
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 使用列表元素 ...
在Bootstrap中，构建一个左侧下拉三级菜单导航是常见的需求，尤其对于那些具有复杂层级结构的网站。这种导航可以帮助用户轻松地浏览和访问网站的各个部分。 首先，让我们了解下Bootstrap菜单的基本构造。Bootstrap...
jQuery popmenu插件是一款专为创建响应式弹出菜单而设计的工具，它能够帮助开发者快速构建适应不同屏幕尺寸的下拉菜单系统，提供良好的触摸设备支持。由于不支持IE8及以下版本的浏览器，popmenu插件充分利用了现代...
综上所述，实现“js仿京东鼠标经过弹出下级菜单”的功能涉及到了JavaScript的基本操作，包括DOM操作、事件处理和CSS样式控制，同时也需要关注性能优化、响应式设计和无障碍性等方面。通过掌握这些知识点，你可以创建...
这个项目"ExpandPopTabView-master"很可能是一个开源的Android库或代码示例，专门用于创建类似美团应用中的可扩展弹出式下拉菜单。 下拉菜单通常用于节省屏幕空间，同时提供多级选择的功能。在这个“仿美团下拉菜单...
在本主题中，我们将探讨五款利用纯`div` 和 `css` 制作的弹出菜单，这些菜单在网站交互中起着关键作用，为用户提供了一种便捷的导航方式。 1. **基础的下拉菜单** 这是最常见的弹出菜单类型，通常出现在导航栏中。...
4. 弹出式菜单：鼠标点击后出现下拉菜单，而不是悬停。 5. 动画效果：添加过渡动画，使菜单展开和关闭更具视觉吸引力。 四、优化技巧 1. 响应式设计：确保下拉菜单在不同屏幕尺寸下都能良好展示，可能需要借助媒体...