纯 CSS 弹出菜单 之 横排三级分类(兼容多个浏览器) By shawl.qiu
2007-01-09 21:41
483 查看
纯 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>
<!--[if !IE]><-->
<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>
<!--><![endif]-->
<!--[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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 弹出菜单, 完美实现, 完美兼容 By shawl.qiu
- 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
- 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
- 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- CSSJS弹出层效果,兼容所有浏览器
- css 三级横向弹出菜单
- shawl.qiu javascript 漂浮广告类(无错兼容多浏览器) Moving v1.0
- 无限级菜单结构 与 Javascript 实现算法, 类 XMenu by shawl.qiu
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
- div+css制作的水平三级横向弹出菜单
- CSS竖向三级弹出菜单(图)
- css水平三级横向弹出菜单
- div+css水平三级横向弹出菜单
- Javascript 元素拖曳操作 By shawl.qiu (兼容IE,Opera,Firefox)
- sqEditor HTML 编辑器 v1.2 By shawl.qiu(兼容 IE, Opera, Firefox)
- 纯CSS三级弹出菜单
- UBB 编辑器演示 (兼容 IE, Opera, Firefox) By shawl.qiu
- 无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu
- DIV+CSS制作的水平三级横向弹出菜单