|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
|
<script src="http://www.phpjx.com:88/js/jquery.min.js"></script>
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
$("div").hover(function(){
|
|
|
$(".div1").css("display","block");
|
|
|
$("div").removeClass("border");
|
|
|
},
|
|
|
function(){
|
|
|
$(".div1").css("display","none");
|
|
|
$("div").addClass("border");
|
|
|
}
|
|
|
)
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
div{
|
|
|
border-top:1px solid #CCCCCC;
|
|
|
border-left:1px solid #CCCCCC;
|
|
|
border-right:1px solid #CCCCCC;
|
|
|
width:100px;
|
|
|
height:30px;
|
|
|
background-color:#ffffff;
|
|
|
text-align:center;
|
|
|
line-height:30px;
|
|
|
}
|
|
|
.border{
|
|
|
border-bottom:1px solid #CCCCCC;
|
|
|
}
|
|
|
.div1{
|
|
|
width:200px;
|
|
|
height:80px;
|
|
|
border-bottom:1px solid #CCCCCC;
|
|
|
display:none;
|
|
|
z-index:10;
|
|
|
margin-top:-1px;
|
|
|
position:relative;
|
|
|
}
|
|
|
li{
|
|
|
list-style:none;
|
|
|
}
|
|
|
</style>
|
|
|
<div class="border" style="z-index:100;position:relative;">栏目</div>
|
|
|
<div class="div1">
|
|
|
<ul>
|
|
|
<li>栏目一</li>
|
|
|
<li>栏目二</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
