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

分类 : 代码案例

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

<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.3cn">菜单选项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.7ccom">菜单选项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>


分类: 代码案例  发布: 2019-07-09-星期二   访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

02-标识符,关键字和保留字
【MySQL】漫谈MySQL体系结构
javascript之标识(zhi)符、关键字与保留字
底层剖析 Window 、Activity、 View 三者关系
MYSQL性能优化之Mysql体系结构,存储引擎
Python语法的使用和简介
《MySQL 性能优化》之理解 MySQL 体系结构
Unity音量可视化——粒子随声浪跳动
JavaScript中this指向问题
【MySQL】Merge Index导致死锁

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
html5中datalist标签怎么用
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
Datalist options 集合,options语法,optio

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16