<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="http://democss.com/style/reset.css" type="text/css" />
<style type="text/css">
body{font:12px/1.5 tahoma,arial,"宋体";padding:10px;text-align:center;}
.list1{border:1px solid #CCC;cursor:pointer;display:inline-block;*display:inline;*zoom:1;border-right:none;}
.list1 li{float:left;width:50px;height:25px;background:#EEE;line-height:25px;text-align:center;border-right:1px #CCC solid;position:relative;}
.list1 ul{border-bottom:1px solid #CCC;border-left:1px solid #CCC;position:absolute;top:100%;left:-1px;display:none;}
.list1 ul li{float:none;}
.list2{display:inline-block;*display:inline;*zoom:1;background:#444;border-top:1px solid #111;border-bottom:1px solid #111;border-left:1px solid #111;cursor:pointer;}
.list2 li{float:left;width:50px;height:25px;line-height:25px;color:white;border-right:1px solid #111;position:relative;}
.list2 ul li{border-right:none;float:none;}
.list2 ul{position:absolute;top:100%;left:-1px;background:#444;border-right:1px solid #111;border-bottom:1px solid #111;border-left:1px solid #111;display:none;}
.list2 a{color:white;}
</style>
</head>
<body>
<h2>二级伸缩菜单</h2>
<ul class="list1 clearfix">
<li>one
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>two
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>three
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>four
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>five
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
</ul>
<h2>二级透明菜单</h2>
<ul class="list2 clearfix">
<li>one
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>two
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>three
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>four
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
<li>five
<ul>
<li><a href="http://democss.com">1</a></li>
<li><a href="http://democss.com">2</a></li>
<li><a href="http://democss.com">3</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://democss.com/script/jquery.js"></script>
<script type="text/javascript">
$(function(){
//二级伸缩菜单
var $list1=$('.list1');
$list1.children("li").hover(function(){
$(this).children().eq(0).stop().slideToggle(300);
},function(){
$(this).children().eq(0).stop().slideToggle(300);
});
//二级透明菜单
var $list2=$('.list2');
$list2.children('li').hover(function(){
$(this).children().eq(0).stop().fadeTo(555,1);
},function(){
$(this).children().eq(0).stop().fadeTo(555,0);
})
});
</script>
</body>
</html>
浙公网安备 33010602011771号