CSS+JS实现兼容性很好的无限级下拉菜单

<!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://www.aa25.cn/css_example/939.shtml)

转载于:https://www.cnblogs.com/yanzhuan/archive/2011/11/24/2261114.html

CSS+JS实现兼容性很好的无限级下拉菜单相关推荐

  1. JS+CSS打造仿QQ面板的三级折叠下拉菜单

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...

  3. 【HTML+CSS】实现网页的导航栏和下拉菜单

    熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...

  4. css基础 CSS 导航栏、CSS 下拉菜单

    阅读目录 导航栏 导航栏=链接列表 垂直导航栏 垂直导航条实例 激活/当前导航条实例 创建链接并添加边框 全屏高度的固定导航条 水平导航栏 内联列表项 浮动列表项 水平导航条实例 链接右对齐 添加分割 ...

  5. html中按钮下拉菜单,CSS 下拉菜单

    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 文本下拉菜单 菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...

  6. 教你玩转CSS 下拉菜单

    目录 基本下拉菜单 实例解析 下拉菜单 下拉内容对齐方式 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 基本下拉菜单 当鼠标移动到指定元素上时,会出现下拉菜单. <style> ...

  7. css创建鼠标悬停下拉菜单样式

    下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...

  8. 纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单

    纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单 实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...

  9. html下拉菜单原理,HTML5 教程之CSS 下拉菜单

    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 文本下拉菜单 实例演示 2 下拉菜单 实例演示 3 基本下拉菜单 当鼠标移动到指定元素上时,会出 ...

最新文章

  1. 13.2.4 模板层——模板语言
  2. python爬虫和数据分析电脑推荐_大数据分析必备的5款Python爬虫库
  3. 搜索引擎设计实用教程(5)-以百度为例
  4. errorattributes 过时_苹果官方确认：iPhone 5c 已被列为过时产品
  5. kafka : CommitFailedException Commit cannot be completed since the group has already rebalanced
  6. 猪肉新鲜度光谱特征指数构建及敏感性分析
  7. prometheus 筛选不同的cpu核心
  8. 苹果笔记本显卡性能测试软件,苹果Mac Pro性能测试：好厉害的“垃圾桶”
  9. Windows下Eclipse for C/C++的“Launch failed. Binary not found”完美解决方案
  10. Font Awesome html源码,如何将 Font Awesome 转成 PNG 图标 详细教程 含源代码_html/css_WEB-ITnose...
  11. python使用百度OCR接口识别图片文字
  12. c语言 结构体 选择题,c语言结构体共用体选择题新
  13. 计算机组老师颁奖词,获奖教师的颁奖词
  14. 网络营销人应具备的五大思维
  15. 我们、这样子相爱、什么都不计较，多好啊～
  16. 电脑系统崩溃 or 卡顿？如何重置Windows 1011系统
  17. java 汉字转为GBK编码，再由GBK编码转为汉字
  18. DOS批处理命令之start命令
  19. 【Qt】桌面应用开发教程——布局|按钮组|容器|常用控件|消息事件机制
  20. 苹果编辑器在哪_苹果 WWDC 2020 发布的ARKit 4 为何低调 ?

热门文章

  1. Angular 学习笔记——拖拽
  2. sublime生产力提升利器
  3. 网络尖兵技术分析及应对
  4. ggplot2中显示坐标轴_ggplot2作图：修改图中一切文本的外观
  5. 超图软件打开倾斜摄影数据注意点
  6. uefi引导linux_使用UEFI双重引导Windows和Linux
  7. 机器学习必读之路必读_2017年必读的9个游戏故事
  8. opensource项目_推出“什么是开放式教育？” Opensource.com上的资源
  9. Bootstrap3栅格系统布局实例
  10. JSON语法之JSON 对象