<!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=gbk" />
<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="http://atf.99bill.com">栏目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="http://www.google.com">菜单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>
分享到：
相关推荐
本资源"CSS下拉菜单.rar"显然是关于如何使用CSS来创建动态、响应式的下拉菜单。 在创建CSS下拉菜单时，我们通常会结合HTML和CSS技术，有时也会用到JavaScript（如本案例标签所示，可能涉及JS特效）。以下将详细介绍...
"CSS横向下拉菜单"是一个常见的交互式菜单设计，尤其适用于网站的顶部导航栏。这种菜单设计利用CSS（层叠样式表）来实现，通常与JavaScript（JS）结合，以增加动态效果和交互性。下面我们将深入探讨如何创建一个CSS...
纯css鼠标经过下拉菜单 纯css鼠标经过下拉菜单.htm
【简易清新的CSS3下拉菜单】是一种网页设计技术，主要应用于网站的导航菜单，以提供用户友好的交互体验。CSS3（层叠样式表第三版）是CSS的最新版本，引入了许多增强网页表现的新特性，如动画、阴影、渐变等。这款...
在这个压缩包"超棒的纯CSS圆角下拉菜单.rar"中，包含了一个无JavaScript依赖的下拉菜单实现，主要展示了CSS在构建交互式用户体验方面的强大能力。 1. **纯CSS下拉菜单**： CSS下拉菜单是一种常见的网页导航元素，...
在本示例中，“html5+css3下拉菜单.zip”是一个压缩包，其中包含了一个利用HTML5和CSS3技术实现的下拉菜单的示例。下拉菜单在网页设计中十分常见，它能有效地组织和展示大量的导航链接，节省空间并提升用户体验。 ...
本资源“jQuery&CSS图形下拉菜单.zip”提供了一种利用jQuery和CSS技术创建美观且功能丰富的下拉菜单的方法。这个压缩包包含了一系列文件，将帮助开发者了解如何将这两种强大的技术结合起来，为网站增添动态效果。 ...
以下是一个简单的示例，展示了如何通过CSS实现下拉菜单的显示和隐藏： ```css .dropdown ul { display: none; } .dropdown li:hover > ul { display: block; } .dropdown ul li { /* 这里可以添加子菜单项的...
这份"纯CSS下拉菜单代码"提供了实现这一功能的简单而实用的方法，尤其适合那些希望避免JavaScript或者jQuery依赖的前端开发者。 纯CSS下拉菜单的实现原理主要基于CSS的选择器、定位以及过渡效果。以下是一些关键...
【标题解析】：“ToolBar Menu纯CSS3下拉菜单”这个标题指的是一个网页设计中的元素，具体来说是一个使用CSS3技术实现的工具栏菜单，其中包含了下拉子菜单的功能。这样的菜单通常出现在网站顶部，用于导航，它允许...
本主题聚焦于“纯CSS下拉菜单”，这是一种不依赖JavaScript实现的下拉菜单技术，主要利用CSS（层叠样式表）来创建动态效果。在实际应用中，这种菜单可能不是最通用的解决方案，但对那些希望深入了解CSS特性和动画...
圆角弧度的CSS3下拉菜单，仔细看下，两个菜单切换时候还带有动画效果，当鼠标放在第一个菜单项的时候，之前的菜单项动画消失，当前菜单项动画下拉，形成承上启下的过渡效果，HTML5动画菜单，暂时不支持IE8.
CSS下拉菜单虽然不是现代前端开发的首选方法（比如现在更流行使用JavaScript或Vue等框架），但它仍然是一种重要的学习素材，因为它涉及到CSS的多个核心概念，对于进阶学习者来说具有很高的实践价值。 三、预备知识 ...
本资源“基于CSS3金属风格下拉菜单.zip”提供了一个利用HTML5、jQuery、JavaScript和CSS技术实现的独特且具有金属质感的下拉菜单方案。 首先，HTML5是现代网页开发的基础，它提供了丰富的语义化标签，如、、等，...
本案例中的"音乐网竖直下拉菜单.zip"是一个专为音乐网站设计的jQuery和CSS实现的侧边滑动下拉菜单。这个菜单具有垂直布局，使得在有限的空间内展示多个层次的导航选项成为可能。 首先，我们来详细了解一下HTML源码...
"纯CSS3实现淡入淡出下拉菜单.zip"是一个专注于使用CSS3技术来创建动态交互式菜单的资源包。这个压缩包包含了实现这种效果所需的代码和文件，适合网页开发者和设计师学习和应用。 CSS3是CSS（层叠样式表）的最新...
在网页设计中，CSS下拉菜单是一个不可或缺的元素，它为用户提供了一种高效且直观的导航方式。这个压缩包包含了19个精心设计和实现的CSS下拉菜单，每个都有其独特的风格和交互效果，旨在提升用户体验并美化网站界面。...
"jQuery CSS3弹性动感下拉菜单"是一个结合了JavaScript库jQuery和CSS3技术的交互式菜单解决方案，旨在提供动态、富有弹性的用户体验。在这个项目中，我们将深入探讨如何利用这两种强大的工具来创建一个吸引人的下拉...
本资源“javascript经典特效---有说明的下拉菜单.rar”聚焦于使用JavaScript实现具有说明性的下拉菜单效果，这对于我们理解JavaScript动态交互设计至关重要。 首先，下拉菜单的基本结构通常由HTML构建，包括`<ul>`...