<!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 runat="server">
<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>
分享到：
相关推荐
以下是关于JavaScript下拉菜单的一些关键知识点： 1. HTML结构：下拉菜单的基础结构通常由`<select>`标签构建，其中包含一系列`<option>`标签来定义菜单项。然而，为了实现更复杂的交互和自定义样式，开发者通常会...
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示更多的导航选项。在这个名为"javascript下拉菜单2"的资源中，包含了实现这一功能的关键文件：`menu.css`、`menu.js`和`test6.jsp`。接下来，...
JavaScript下拉菜单模板是一种网页交互元素，用于在有限的空间内展示丰富的导航选项。在网页设计中，下拉菜单常用于网站导航，使用户能够轻松访问多层次的页面结构，而无需占用太多屏幕空间。这种菜单主要由...
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示多个选项，通常在网站的导航栏或表单中使用。这种菜单通过JavaScript语言实现，提供了动态效果和用户友好的体验，比如点击后展开或收起菜单项。...
总结，JavaScript下拉菜单的实现涉及HTML结构、CSS样式和JavaScript交互的综合运用。开发者可以根据需求选择不同的实现方式，从基本的手动编写到利用成熟的库和框架，来创建符合项目需求的、用户友好的下拉菜单。
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航选项，提高用户界面的可用性和效率。在网页设计中，JavaScript常被用来实现动态效果，如下拉菜单，因为HTML和CSS本身无法实现复杂的交互性。 这个名...
JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航，增强用户体验。在这个主题中，我们将深入探讨JavaScript在实现下拉菜单中的应用，以及如何通过提供的源码进行自定义和优化。 首先，JavaScript作为...
JavaScript下拉菜单是一种常见的网页交互元素，用于在有限的空间内展示丰富的导航选项。在网页设计中，下拉菜单能够有效地组织和展示大量的链接，提高用户体验，尤其在移动设备上节省屏幕空间。本教程将深入探讨多样...
本文将详细解析"可配置的javascript下拉菜单"这一技术，包括其核心特性、实现原理以及如何利用提供的css.css、hack.css、js.js文件进行自定义配置。 1. **核心特性**： - **多级层联**：此下拉菜单支持多级菜单...
### 标题：javascript下拉菜单 这个标题明确了文档的主题——使用JavaScript实现的下拉菜单功能。 ### 描述：javascript下拉菜单.txt 很实用的js脚本，下载后只需修改一下后缀名即可使用. 这段描述提供了关于该...
在前端开发中，JavaScript下拉菜单是常见的交互元素，尤其适用于网站导航或复杂选项的展示。本项目提供了一个可上下滑动的3级菜单解决方案，适用于各种需要多层次菜单的场景。这种菜单设计允许用户轻松浏览长内容，...
通过以上的步骤，我们就实现了一个基本的纯JavaScript下拉菜单插件，同时处理了兼容性问题。然而，实际项目中可能还需要进一步优化，比如添加动画效果、防止快速点击时的闪烁现象等。这个简单的例子展示了如何利用...
例如，我们可以用JavaScript来实现下拉菜单的动画效果或自定义样式。 在这个案例中，我们看到了"jquery.min.js"，这是jQuery库的压缩文件。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画等功能...
创建JavaScript下拉菜单的第一步是编写HTML结构。例如： ```html <li><a href="#">主菜单项1 <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> ...
Chrome Menu是一种基于JavaScript和CSS实现的交互式下拉菜单，它在网页设计中扮演着重要的角色，为用户提供直观且易于导航的界面元素。这个菜单系统的设计理念是简洁、高效，并且对搜索引擎友好，这意味着它不仅提供...