<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript下拉菜单</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
margin-left:1px;
width:120px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
<li><a href="#">栏目2->菜单5</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3</a>
<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单1</a>
<ul>
<li><a href="#">菜单1->子菜单1</a></li>
<li><a href="#">菜单1->子菜单2</a></li>
<li><a href="#">菜单1->子菜单3</a></li>
<li><a href="#">菜单1->子菜单4</a></li>
</ul>
</li>
<li><a href="#">栏目3->菜单2</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单3</a>
<ul>
<li><a href="#">菜单3->子菜单1</a></li>
<li><a href="#">菜单3->子菜单2</a></li>
<li><a href="#">菜单3->子菜单3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用纯HTML和CSS来创建一个三级下拉菜单。 首先，HTML是基础结构，用于定义菜单的层次结构。在提供的代码中，可以看到一个`<ul>`元素作为主菜单容器，其内部的`<li>`元素代表一级菜单项。每个一...
在本资源包“下拉菜单集合”中，包含了多种类型的下拉菜单，包括二级和三级下拉菜单，这些设计通常用于导航栏、设置选项或用户界面的其他部分，以节省屏幕空间并提升用户体验。 一、下拉菜单的基本结构与原理 下拉...
在EXCEL中可以实现全国省市县三级下拉菜单选择数据的实现。
ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单，通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中，例如电商平台、在线论坛等。 在这个例子中，我们可以看到，三级...
本文将详细解析"简单的三级下拉菜单"这一主题，以及如何实现这种菜单。 首先，我们要理解三级下拉菜单的基本概念。一个三级下拉菜单是指在主菜单项下展开一级子菜单，一级子菜单再展开二级子菜单，最后二级子菜单还...
在网页设计中，导航菜单是不可或缺的部分，尤其在大型网站中，为了清晰地展示大量信息层级，三级下拉菜单的应用非常普遍。本实例主要讲解如何使用jQuery库来创建一个兼容各浏览器、小巧实用的三级下拉菜单。jQuery以...
扩展到三级下拉菜单，我们需要在二级菜单项内再嵌套一个`<ul>`，并重复上述过程，但要注意以下几点： - 需要分别处理不同级别的鼠标悬停事件，以避免二级和三级菜单的显示互相干扰。 - 可以使用CSS的`position`属性...
"一个很漂亮的三级下拉菜单"这个项目，正如其名，是针对这一需求提供的一种美观且实用的解决方案。 首先，我们可以从"index.html"文件入手。这是网页的主文件，包含HTML标记语言，定义了网页的结构和内容。在这个...
jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...
网站三级下拉菜单是一种常见的网页交互设计，尤其在大型网站中极为常见，它能有效地组织大量链接，提高用户导航的效率。在这个名为“网站三级下拉菜单.zip”的压缩包中，我们推测包含了一个用于实现这一功能的...
在Excel VBA（Visual Basic for Applications）中，创建三级下拉菜单是一项实用的技能，它可以帮助用户更有效地组织和导航大量的数据。这种功能通常应用于数据输入表单或报告，使得用户能够通过层次结构来选择所需的...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，因此用jQuery实现三级下拉菜单是创建高效网页导航的常见方法。本教程将深入探讨如何利用jQuery创建美观且功能完善的三级下拉菜单。 ...
下面将详细介绍如何实现二级下拉菜单的简单做法。 首先，我们需要理解二级下拉菜单的基本概念。一级下拉菜单通常用于显示主类别，而二级下拉菜单则展示与一级菜单相关的子类别。例如，一级菜单可能是“部门”，包含...
在网页设计中，二级和三级下拉列表菜单是一种常见的交互元素，主要用于呈现层次结构的数据，如选择地理位置、分类...通过合理的组合运用，我们可以构建出既美观又易于使用的三级下拉菜单，满足用户在不同场景下的需求。
"支持FF、IE6下面很实用的三级下拉菜单"这个主题聚焦于在两种不同的浏览器环境——Firefox（FF）和Internet Explorer 6（IE6）上实现这样的功能。由于这两个浏览器在处理CSS和JavaScript方面存在显著差异，因此设计...
在网页设计中，3级下拉菜单是一种常见的交互元素，常用于导航栏，帮助用户在层级结构复杂的网站中快速定位和浏览内容。这种菜单结构能够有效地组织和展示大量的信息，而不会使页面显得过于拥挤。下面我们将深入探讨3...
而使用jQuery实现的三级下拉菜单可以提升用户体验，特别是在内容丰富的网站中。本项目名为"jQuery导航条三级下拉菜单代码"，包含两个版本，可能是为了提供不同的实现方式或功能优化。 首先，`index.html`文件是网页...
非常简单的三级下拉菜单，好改用作二级也行
最新项目需求要求做一个三级下拉菜单列表（树形下拉菜单）。但UGUI并没有原生的插件，只能自己实现。思路每个级的ItemPanel（一个单级菜单条）样式是一样的，于是需要一个panel来装所有的itemPanel，在整个菜单 顶部...