很多人在做web的级联下拉菜单时，常常利用Javascript来写，这里强烈不推荐使用这种方法，原因有两个：
1.必须利用onmouseover和onmouseout函数，效率先不说，非常复杂。尤其是设置到多级菜单的时候，需要利用递归，难度很大。
2.兼容性太差。写完的级联菜单在ie下正常，在Firefox就跑样了，同样在Firefox正常，在ie下就走样了，最后需要根据浏览器写两份Javascript，苦啊~~~。
这里推荐利用css生成下来菜单。方法直接，兼容性好，需要写Javascript代码。生成后的效果图如下图：
css级联菜单最重要的是下面两段代码：
#nav li ul {
opacity: 0; <!--默认二级菜单不显示，即ul透明，不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时，二级菜单不透明，即ul不通透，从而显示。-->
}
它的作用就是：鼠标经过一级菜单的时候二级菜单不透明，否则二级菜单透明，从而达到级联菜单的效果，很简单吧。 当然要想把样式做的话少些，还是要自己花些心思的。
下面是完整代码，附件也是完整代码。
<!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>title</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
background:#ccc;
}
#nav {
list-style-type: none; <!--如果没有这句代码，ul就会出现默认样式。-->
height: 40px;
padding: 0;
margin: 0;
}
#nav li {
float: left;
position: relative !important; <!--如果没有这句代码，li菜单位置就会出现在最左边。-->
padding: 0;
line-height: 40px;
}
#nav li a {
display: block ; <!--如果没有这句代码，菜单会挤在一起。--> ;
width:120px;
color: #fff;
text-decoration: none;
background: #5a8078;
}
#nav li a:hover {
color: #a3f1d7;
}
#nav li ul {
opacity: 0; <!--默认二级菜单不显示，即ul透明，不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时，二级菜单不透明，即ul不通透，从而显示。-->
}
#nav li ul li {
float: none ;
height: 0;
line-height: 0;
}
#nav li:hover ul li {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a target="_blank" href="http://kutoku.com">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">桌面</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">主题</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">PNG</a></li>
</ul>
</li>
<li><a target="_blank" href="http://kutoku.com">Contact</a></li>
</ul>
</body>
</html>
分享到：
相关推荐
Bootstrap 实现下拉菜单多级联动 Bootstrap 是一个非常流行的前端框架，它提供了许多实用的组件和工具，使得开发者可以快速构建漂亮的网页。今天，我们将讨论如何使用 Bootstrap 实现下拉菜单多级联动。 在 ...
在这个场景中，我们将深入探讨如何使用jQuery Mobile实现移动客户端的多级下拉导航菜单。 首先，jQuery Mobile 的核心在于其“增强”的概念，它允许开发者使用HTML5的基本标记来创建页面和交互元素，然后通过...
在IT行业中，多级联动是一种常见的交互设计，它在网页或应用程序中用于实现不同选择之间的联动效果，例如下拉菜单、级联选择等。本文将深入探讨“ExpandTab多级联动（下拉式菜单）”这一主题，以及如何通过源码实现...
这个文件可能包含了一个基于CSS和JavaScript的级联菜单实现。级联菜单通常通过点击一个顶级菜单项来显示其子级菜单。在这种实现中，JavaScript可能用于处理点击事件，动态地显示或隐藏子菜单。CSS则用于样式设置，...
`hmenu-2.9.zip`可能是一个特定的菜单库，例如HMenu，它是一个强大的JavaScript和CSS组合，用于创建高度自定义的多级菜单。 总的来说，HTML菜单的实现是一个综合了HTML、CSS和JavaScript技术的过程，通过这些技术...
jQuery Combotree 是一个专为Bootstrap设计的组件，它将传统的下拉菜单与树形结构相结合，提供了一种交互式的多选功能。这个组件基于jQuery库和zTree插件，使得在网页应用中能够方便地创建具有下拉树效果的输入控件...
7. **层次结构**：如果菜单包含子菜单，可以通过CSS和JavaScript实现级联下拉效果，使多级导航更加直观。 8. **可访问性**：确保菜单对屏幕阅读器友好，符合Web Content Accessibility Guidelines (WCAG)标准，例如...
另外，这里提供了一个简单的多级级联菜单的代码片段： ```html <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <span class="icon-bar"></span> ...
此外，还定义了两个用于显示多级选项的div，分别对应第一级和第二级选择器的列表，它们通过v-show指令控制显示和隐藏。 在脚本部分，作者详细定义了组件的data对象，其中包含了所有选项的数据结构以及两个控制显示...
实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级下拉列表 113 2.3 单选按钮组 114 实例070 不提交表单获取单选按钮的值 114 实例071 选中单选...
当用户在一个下拉菜单中选择一个选项时，它会触发另一个下拉菜单显示与之前选择相关的子选项，这种交互通常称为联动或级联菜单。 在描述中，提到了一个具体的实例，展示了如何通过JavaScript代码创建一个三级联动...
2. **级联下拉**：使用JavaScript创建两个或多个下拉列表，前一个的选择会触发后一个下拉列表的更新，展示与之前选择对应的子地区。 3. **事件处理**：监听下拉列表的change事件，更新关联的下拉列表内容。 4. **...
总结，layui treeselect组件是layui框架中一个强大的工具，通过将zTree的功能集成到layui中，使得开发者能够更加便捷地在前端实现树形结构的下拉多选功能，提高了用户体验和开发效率。正确理解和使用这个组件，能够...