横向二级导航代码,Css代码库,德仔网

代码语言

代码分类

【Css】横向二级导航

作者:Dezai.CN / 发布于2013/4/17/ 479

横向二级导航


	<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
	<html>
	<head>
	<title>横向二级导航</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
	<style type="text/css">
	html *{
	 padding:0;
	 margin:0;
	 font-family: Arial, Verdana, Helvetica, sans-serif;
	}
	.top-menu *{
	 text-decoration:none;
	 font-size:9pt;
	}
	.top-menu * a:hover{
	 background-color:#801818;/* 鼠标经过时的红色背景，可自定义 */
	}
	.top-menu{
	 list-style:none;
	 height:40px;
	 width:100%;
	 background-color:#333;
	}
	.top-menu li{
	 float:left;
	 border-left:1px solid #4a4a4a;
	 border-right:1px solid #242424;
	 border-top:1px solid #4a4a4a;
	 border-bottom:1px solid #242424;
	 position:relative;
	}
	.top-menu li a{
	 color:#fff;
	 height:38px;
	 line-height:38px;
	 padding:0 20px;
	 blr:expression(this.onFocus=this.close());
	 blr:expression(this.onFocus=this.blur());
	 display:inline-block;
	}
	.top-menu li a:focus{
	 -moz-outline-style: none;
	}
	.top-menu li .sub-menu{
	 position:absolute;
	 top:39px;
	 left:-1px;
	 list-style:none;
	 background-color:#333;
	 display:none;
	}
	.top-menu li .sub-menu li{
	 text-align:center;
	 clear:left;
	 width:140px;
	 height:35px;
	 line-height:35px;
	 position:relative;
	}
	.top-menu li .sub-menu li a{
	 height:34px;
	 line-height:34px;
	 width:138px;
	 padding:0;
	 display:inline-block;
	}
	</style>

	<script>
	$(function(){
	 $(".top-menu>li").hover(function(){
	 $(this).children('ul').stop(true,true).show(500);
	 },function(){
	 $(this).children('ul').stop(true,true).hide(500);
	 })
	})
	</script>
	<body>
	<ul class="top-menu">
	<li><a href="#">站点首页</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	<li><a href="#">精彩日志</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	<li><a href="#">图说天下</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	<li><a href="#">空间申请</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	<li><a href="#">新闻热点</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	<li><a href="#">编不出来啦！</a>
	 <ul class="sub-menu">
	 <li><a href="#">站点首页</a></li>
	 <li><a href="#">精彩日志</a></li>
	 <li><a href="#">图说天下</a></li>
	 <li><a href="#">空间申请</a></li>
	 <li><a href="#">新闻热点</a></li>
	 <li><a href="#">编不出来啦！</a></li>
	 </ul>
	</li>
	</ul>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　二级导航　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)