<!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>

本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/815559

CSS+JS实现兼容性很好的无限级下拉菜单的更多相关文章

  1. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  2. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  3. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js点击时关闭该范围下拉菜单之外的菜单

    $(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest(& ...

  5. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  6. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  7. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  8. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

随机推荐

  1. 如何清洗 Git Repo 代码仓库

    git prune 如何清洗 Git Repo 代码仓库       在腾讯云上创建您的SQL Cluster>>> »   相信不少团队的代码仓库 Git Repo 变得越来越大. ...

  2. Tomcat7.x 与 Tomcat6.x

    试用 Tomcat7.x 与 Tomcat6.x 的明显不同 + Context 填写方法 + 默认应用配置方法 标签: tomcat数据库驱动程序数据库虚拟机jdbcjavascript 2012- ...

  3. 20145215实验三 敏捷开发与XP实践

    20145215实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软 ...

  4. AutoTest简介

    前言(仅看介绍本身的可以略过) 在离职后的一段时间里,个人总结了过去几年工作的心得,结合以往的工作经验.重新思考并重构了前些年做的一些东西(主要是测试相关),产生了设计AutoTest这样的一个测试工 ...

  5. display:inline-block的坑

    一直用display:inline-block做某种导航栏还很爽,突然有一个柱状图的需求便也这么做了,于是成功被坑. 简简单单个需求,大致这样 只用几个li加上display:inline-block ...

  6. Entity Framework若干个扩展

    声明 这里有此东西是参考各大神修改和补充而来,有些地方就找不到原文章的地址了,一参考地址如下: http://www.cnblogs.com/ahui/archive/2011/08/04/21272 ...

  7. jdbc基础 (二) 通过properties配置文件连接数据库

    csdn博文地址:jdbc基础 (二) 通过properties配置文件连接数据库 上一篇描述了对mysql数据库的简单操作,下面来看一下开发中应该如何灵活应用. 因为jdbc对数据库的驱动加载.连接 ...

  8. 关于 jquery select2 多个关键字 模糊查询的解决方法

    select2 只针对 元素的text()进行匹配,实际开发过程中可能会存在通过id 或者特殊编码进行 多关键字匹配. 改动了下源码:红色为改动部分. process=function(element ...

  9. 每天一个linux命令（26）：du 命令

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  10. Linux大文件已删除，但df查看已使用的空间并未减少解决

    在我的生活当中遇到磁盘快满了,这时候准备去删除一些大文件 于是我使用ncdu 查看了一下当前系统占用资源比较多的是那些文件,结果一看是elasticsearch的日志文件,好吧,竟然找到源头了,那就把 ...