纯 CSS 弹出菜单之横排三级分类(兼容多个浏览器) By shawl.qiu

最新推荐文章于 2024-07-12 20:49:16 发布

btbtd

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量2.3k

点赞数

文章标签： css 浏览器 div class function float

本文链接：https://blog.csdn.net/btbtd/article/details/1478479

版权

Me xhtml & css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

纯 CSS 弹出菜单之横排三级分类(兼容多个浏览器) By shawl.qiu

说明:
之前写过纯 CSS 的二级分类菜单, 不过那是二级, 写是很容易, 不过今天搞这个三级分类, 天呀, 整整花了鄙人一天的青春..真晕...
有鉴于此, 特把写好的三级CSS菜单写文一篇, 以后遇到三级分类, 这个就是模板了...

附: 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
http://blog.csdn.net/btbtd/archive/2006/10/01/1315336.aspx

shawl.qiu
2007-01-09
http://blog.csdn.net/btbtd

<!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=utf-8" />
<title>shawl.qiu asp/jscript 个人源代码管理系统</title>
<style type="text/css">
/*<![CDATA[*/
/* shawl.qiu CSS Document : shawl.qiu@gmail.com */
body{
margin:0px auto;
width:760px;
background-color:rgb(252,252,252);
}
*{
margin:0px;
padding:0px;
text-decoration:none;
}
.fltr{
float:right;
}
.fltl{
float:left;
}
a:link{
color:black;
}
a:hover{
background-color:yellow!important;
color:black;
}
a:visited{
background-color:rgb(248,248,248);
}
hr{
border-top: 1px dashed #FFFFFF!important;
border-right: 1px dashed #FFFFFF!important;
border-bottom:1px dashed black!important;
border-left: 1px dashed #FFFFFF!important;
margin:10px 0px;
}
p{
margin:5px 0px;
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#sqMenu * {
list-style-type:none;
margin:0px;
padding:0px;
}
#sqMenu ul{
float:left;
padding:1px 10px 1px 0px;
}
ul ul{
display:none;
}
#sqMenu ul * ul{
border-top: 1px dashed black;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
.cat2 * a{
display:block;
width:80px;
background-color:#fff;
border-bottom:1px dashed black;
padding:2px 0px!important;
}
/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#sqMenu{
display:table;
width:100%;
background-color:#f8f8f8; /* 主背景色*/
}
#sqMenu ul:hover > li.cat2{
display:block;
position:relative;
}
#sqMenu ul:hover > .cat2 ul{
display:block;
width:80px;
position:absolute;
padding:0px 0px 0px 2px;
}
#sqMenu ul:hover > .cat2 ul li ul{
display:none;
position:absolute;
}
.cat3:hover > ul{
display:block!important;
left:80px;
width:120px;
margin:-22px 0px 0px 2px!important;
position:absolute;
}
/*]]>*/
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#sqMenu{
display:table;
width:100%;
background-color:#f8f8f8; /* 主背景色*/
height:20px;
overflow:hidden;
}
.cat2 ul{
padding:0px 0px 0px 2px!important;
}
.liHt{
display:inline!importnat;
}
.cat2_{
display:block;
position:absolute;
}
.cat3_{
display:block;
position:absolute;
left:80px;
margin:-20px 0px 0px 0px!important;
}
.hid{
display:none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
onload=function(){
var oMain=document.getElementById('sqMenu');
for(var i=0, j=oMain.childNodes.length; i<j; i++){
try{
var oTemp=oMain.childNodes[i];
oTemp.onmousemove=function(){
try{
var oCld=this.childNodes[1];
var oUl=oCld.childNodes[0];
oUl.className='cat2_';
oUl.onmouseout=function(){
this.className='hid';
}
try{
for(var i1=0, j1=oUl.childNodes.length; i1<j1; i1++){
try{
var oLiSub=oUl.childNodes[i1];
oLiSub.className='liHt';
oLiSub.onmousemove=function(){
try{
var oUlSub=this.getElementsByTagName('ul')[0];
oUlSub.className='cat3_';
oUlSub=null;
} catch(e){}
}
oLiSub.onmouseout=function(){
try{
var oUlSub=this.getElementsByTagName('ul')[0];
oUlSub.className='hid';
oUlSub=null;
}catch(e){}
}
oLiSub=null;
}catch(e){} // end try 4
} // end for 2
}catch(e){} // end try 3
oUl=null;
}catch(e){} // end try2
}
oTemp=null;
}catch(e){} // end try 1
} // end for 1
oMain=null;
}
//]]>
</script>
<![endif]-->
</head>
<body>
<div>
<div style='float:right;'>
<a href='http://127.0.0.1:85/post.asp'>发文</a>
<a href='http://127.0.0.1:85/manage.asp'>管理</a>
<a href='http://127.0.0.1:85/login.asp?id=logout'>登出</a>
</div>
<div style='float:left;'>
<a href='http://127.0.0.1:85/default.asp'>首页</a>
<a href='http://127.0.0.1:85/category.asp'>类别</a>
<a href='http://127.0.0.1:85/tag.asp'>标签</a>
<a href='http://127.0.0.1:85/search.asp'>搜索</a>
</div>
</div><br/ clear='both' />
<div id="sqMenu">
<ul>
<li><a href="category.asp?cat1id=1">JScript</a></li>
<li class="cat2">
<ul>
<li class="cat3"><a href="category.asp?cat1id=1&cat2id=1">函数库</a>
<ul>
<li><a href="category.asp?cat1id=1&cat2id=1&cat3id=2">文件</a></li>
<li><a href="category.asp?cat1id=1&cat2id=1&cat3id=3">测试</a></li>
<li><a href="category.asp?cat1id=1&cat2id=1&cat3id=0">无分类</a></li>
</ul>
</li>
<li class="cat3"><a href="category.asp?cat1id=1&cat2id=4">类库</a>
<ul>
<li><a href="category.asp?cat1id=1&cat2id=4&cat3id=6">数据操作</a></li>
<li><a href="category.asp?cat1id=1&cat2id=4&cat3id=0">无分类</a></li>
</ul>
</li>
<li class="cat3"><a href="category.asp?cat1id=1&cat2id=8">杂类</a>
<ul>
<li><a href="category.asp?cat1id=1&cat2id=8&cat3id=0">无分类</a></li>
</ul>
</li>
<li class="cat3"><a href="category.asp?cat1id=1&cat2id=9">prototype库</a>
<ul>
<li><a href="category.asp?cat1id=1&cat2id=9&cat3id=0">无分类</a></li>
</ul>
</li>
<li><a href="category.asp?cat1id=1&cat2id=0">无分类</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="category.asp?cat1id=5">JavaScript</a></li>
<li class="cat2">
<ul>
<li class="cat3"><a href="category.asp?cat1id=5&cat2id=7">杂类</a>
<ul>
<li><a href="category.asp?cat1id=5&cat2id=7&cat3id=0">无分类</a></li>
</ul>
</li>
<li class="cat3"><a href="category.asp?cat1id=5&cat2id=11">类库</a>
<ul>
<li><a href="category.asp?cat1id=5&cat2id=11&cat3id=0">无分类</a></li>
</ul>
</li>
<li class="cat3"><a href="category.asp?cat1id=5&cat2id=12">函数库</a>
<ul>
<li><a href="category.asp?cat1id=5&cat2id=12&cat3id=0">无分类</a></li>
</ul>
</li>
<li><a href="category.asp?cat1id=5&cat2id=0">无分类</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="category.asp?cat1id=7">VBScript</a></li>
<li class="cat2">
<ul>
<li class="cat3"><a href="category.asp?cat1id=7&cat2id=10">类库</a>
<ul>
<li><a href="category.asp?cat1id=7&cat2id=10&cat3id=0">无分类</a></li>
</ul>
</li>
<li><a href="category.asp?cat1id=7&cat2id=0">无分类</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="category.asp?cat1id=8">测试类</a></li>
<li class="cat2">
<ul>
<li><a href="category.asp?cat1id=8&cat2id=0">无分类</a></li>
</ul>
</li>
</ul>
</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
aaaaaaaaaaaaaaaaa<div>oooo</div>
</body>
</html>

btbtd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
纯 CSS 弹出菜单之横排三级分类(兼容多个浏览器) By shawl.qiu

纯 CSS 弹出菜单之横排三级分类(兼容多个浏览器) By shawl.qiu 说明: 之前写过纯 CSS 的二级分类菜单, 不过那是二级, 写是很容易, 不过今天搞这个三级分类, 天呀, 整整花了鄙人一天的青春..真晕... 有鉴于此, 特把写好的三级CSS菜单写文一篇, 以后遇到三级分类, 这个就是模板了... 附: 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
复制链接

扫一扫