<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.all{width:600px;background:cadetblue;margin:20px auto;border:1px solid silver;position: relative;}
a{display:block;padding:0 20px;font-size:14px;text-decoration: none;color:seashell;}
ul{margin-left:10px;list-style:none;width:270px;height:40px;}
li{float:left;line-height:40px;background:darkcyan;}
.box{position:absolute;left:0;top:40px;padding: 30px 30px;background: silver;color:rgba(0,0,0,0.8);}
.box p{margin-top:10px;text-indent: 2em;}
.fin{display: none;}
</style>
</head>
<body>
<div class="all">
<!--<ul>
<li class="one" style="background: pink;">
<a href="##">HOME</a>
<div class="box box1" >
<h4>第一页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
<li class="one1">
<a href="##">ABOUT</a>
<div class="box box2">
<h4>第二页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
<li class="one3">
<a href="##">CLIENTS</a>
<div class="box box3">
<h4>第三页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</li>
</ul>-->
<ul>
<li class="one" style="background: pink;">
<a href="##">HOME</a>
</li>
<li class="one1">
<a href="##">ABOUT</a>
</li>
<li class="one3">
<a href="##">CLIENTS</a>
</li>
</ul>
<div class="box box1" >
<h4>第一页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
<div class="box box2">
<h4>第二页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
<div class="box box3">
<h4>第三页</h4>
<p>啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。</p>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$(".all ul li").click(function(){
$(this).css('background-color','pink').siblings().css('background-color','darkcyan');
$(".all .box").css("z-index","999").siblings().css("z-index","-1");
})
})
</script>
1 回答
- 1 回答
- 0 关注
- 1127 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消