|
#2
诸葛修勤2013-11-19 00:14
本身就比较简单了
 ！ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("#one").hover(function(){
$("#a").show();
},function(){
$("#a").hide();
})
$("#two").hover(function(){
$("#b").show();
},function(){
$("#b").hide();
})
$("#three").hover(function(){
$("#c").show();
},function(){
$("#c").hide();
})
})
</script>
<style type="text/css">
body,div,ul,li{ padding:0; margin:0; border:0;}
.clear{ clear:both;}
#nav{ width:500px; height:30px; margin:20px auto;}
#nav li{ width:160px; height:30px; border-right:1px solid #06F; list-style:none; float:left; color:#000; background:#09F; text-align:center; font:12px/30px "宋体";}
#nav li:hover{ background:#06F; color:#F00;}
#nav .a_nav{ width:162px; position:relative; background:#09F; display:none;}
#nav .a_nav li{ width:161px; height:25px; list-style:none; color:#000; text-align:center;font:12px/30px "宋体"; margin-top:2px;}
#nav .a_nav li:hover{ background:#06F; cursor:pointer;}
</style>
</head>
<body>
<ul id="nav">
<li id="one">文章
<ul class="a_nav" id="a">
<li>a</li>
<li>a</li>
<li>a</li>
<div class="clear"></div>
</ul>
</li>
<li id="two">教程
<ul class="a_nav" id="b">
<li>a</li>
<li>a</li>
<li>a</li>
<div class="clear"></div>
</ul>
</li>
<li id="three">视频
<ul class="a_nav" id="c">
<li>a</li>
<li>a</li>
<li>a</li>
<div class="clear"></div>
</ul>
</li>
</ul>
</body>
</html>
