<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS+JS实现兼容性很好的无限级下拉菜单</title>
<style type="text/css">
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu{ width:778px; height:26px; background:#fff; margin:0 auto;}
.menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;}
.menusel h2{ font-size:12px; }
.menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;}
.menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;}
.ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; }
.position{ position:absolute; z-index:1;}
.menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;}
.menusel .block{ display:block;}
.typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; }
.typeul li a{ border:none;width:125px; }
.typeul li a:hover{ border:none; background:#ddd;}
.typeul{ margin-left:0; }
.typeul ul{left:125px; top:0; position:absolute;}
.fli{ margin-left: -1px; border-left:#eeeeee solid 1px;}
.menusel .lli{ border:none; }
</style>
<script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script><!-- IE6背景图片闪烁问题 -->
</head>
<body>
<div class="menu">
<div id="menu1" class="menusel">
<h2><a href="/">菜单1</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.33567.cn">菜单选项1-2</a></li>
<li>
<a href="#">菜单选项1-2</a>
<ul>
<li class="fli"><a href="#">菜单选项1-2-1</a></li>
<li class="lli"><a href="#">菜单选项1-2-2</a></li>
</ul>
</li>
<li><a href="http://www.7caidy.com">菜单选项1-2</a></li>
<li class="lli"><a href="#">菜单选项1-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
<div id="menu2" class="menusel">
<h2><a href="#">菜单2</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项2-2</a></li>
<li><a href="#">菜单选项2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项2-2</a></li>
<li class="lli"><a href="#">菜单选项2-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
<div id="menu3" class="menusel">
<h2><a href="#">菜单3</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项3-2</a></li>
<li><a href="#">菜单选项3-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项3-2</a></li>
<li class="lli"><a href="#">菜单选项3-2</a></li>
</ul>
</div><!-- position -->
</div><!-- menusel -->
</div><!-- menu -->
<script type="text/javascript">
for(var x = 1; x < 4; x++)
{
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type()
{
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show()
{
menuul[0].className = "clearfix typeul block"
}
function unshow()
{
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++)
{
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(liul)
{
typeshow()
}
}
function typeshow()
{
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul()
{
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
</script>
</body>
</html>
分享到：
相关推荐
本主题将探讨如何利用CSS（层叠样式表）和JavaScript来分别实现下拉菜单的效果。 首先，我们来理解CSS在创建下拉菜单中的作用。CSS是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言。在下拉菜单...
本项目“html+css+JavaScript实现淡入淡出下拉菜单”就是针对这一需求的一个实例，旨在帮助初学者理解如何结合HTML、CSS和JavaScript来创建一个具有动画效果的下拉菜单。以下是实现这个功能的具体步骤和涉及的知识点...
div+css+js实现菜单的收缩与展开
总的来说，这个压缩包为学习和实践HTML、CSS和JavaScript提供了一个很好的平台。通过深入研究和模仿这些案例，开发者可以提升自己的前端技能，为构建功能齐全、美观易用的登录注册界面打下坚实的基础。同时，这也对...
1. **交互性**：JavaScript可以实现表单验证、下拉菜单、轮播图、模态框等交互效果。 2. **动画效果**：CSS3动画和JavaScript可以让元素平滑移动、淡入淡出，增强视觉吸引力。 3. **响应式布局**：通过媒体查询，...
在网页设计中，导航菜单是...总的来说，"CSS+js无限级折叠导航菜单"是一个综合运用前端技术实现动态、交互性强的导航菜单的实例。通过学习和实践这个方案，开发者可以提升自己的前端技能，更好地服务于网页的用户体验。
本示例中，我们将探讨如何使用纯JavaScript和CSS来实现一个简单的下拉列表功能，特别适合用于网站的二级导航。 首先，让我们了解下拉列表的基本结构。一个基本的HTML下拉列表通常由`<select>`元素和一系列`<option>...
在项目“Html+CSS +Javascript实现的一个很炫个人主页网页”中，CSS不仅使得网站在视觉上具有吸引力，而且还可能运用了CSS3的动态过渡和动画效果，让用户体验更为流畅和互动。此外，响应式设计是当前网页设计的趋势...
【标题】：“Ajax + Div + JS + XML + Servlet 实现无限级动态目录树” 这篇文章主要讲解如何使用Ajax、Div、JavaScript、XML以及Servlet技术来创建一个可以动态加载、展示无限层级目录结构的交互式树形组件。这个...
- **浏览器兼容性**：解决不支持框架的问题。 **第十章：利用表单进行交互** - **表单构建**：创建基本表单。 - **表单控件**：使用`<input>`标签创建不同类型输入项。 - **下拉列表与多行文本框**：丰富表单元素...
在"css+js实现网站换肤"的场景下，我们将探讨如何利用CSS（层叠样式表）和JavaScript来实现这一功能。 首先，CSS是网页设计中的关键部分，用于定义元素的外观、布局和结构。在换肤功能中，我们可以创建多个CSS文件...
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
运用html+css+js三件套实现动态圣诞树
用html+css+js/jquery实现的点击按钮弹出一个层窗口效果。注释部分使用js实现的，script部分则是jquery实现的，效果更好一些。可以把jquery部分注释掉来看js的效果
在这个电商项目中，CSS将用于实现商品展示的美观样式，如色彩搭配、响应式布局、悬浮菜单、动画效果等。初学者需要掌握盒模型、定位、Flexbox或Grid布局系统，以及媒体查询（Media Queries）来实现移动端的自适应...
总的来说，"能挡住下拉表单的CSS+JS下拉菜单"是一个实用的网页设计技巧，它结合了CSS的样式控制和JavaScript的动态交互，解决了常见的用户体验问题。通过深入研究并实践这个案例，开发者可以提高自己的前端技能，为...
1. **导航菜单交互**：通过JavaScript，我们可以实现导航菜单的展开和折叠，以及高亮当前选中的页面。 2. **滚动效果**：比如滚动到顶部按钮、页面滚动时固定头部等。 3. **表单验证**：可以验证用户输入，如邮箱...
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种...对于学生和希望了解Web前端的人来说，这是一个很好的实践案例。