<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
}
#header{
background: repeat-x url("header_bg.png") ;
height:30px;
width:90%;
margin:0px auto;//
居中
}
#header .logo{
float:left;
}
#header .member{
float:right;
line-height:30px;
width:100px;
height:30px;
background: url("arrow.png") no-repeat 70% center;
margin:0 auto;
cursor:pointer;
}
ul{
position:absolute;
top:30px;
left:1198px;
padding:10px 0 0 0;
margin:0;
border:1px solid ;
border-top:none;
width:100px;
height:100px;
display:none;
}
ul li{
list-style-type:none;
height:25px;
line-height:25px;
text-indent:20px;
}
ul li a{
text-decoration:none;
display:block;
background:url("arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover{
background:#fc0 url("arrow4.gif") no-repeat 5px 45%;
}
</style>
<script type="text/javascript" src="
jquery.min.js">
</script>
<script type="text/javascript">
//js下拉菜单
//by www.jb200.com
$(function(){
$("#header .member").hover(
function () {
$("ul").css("display","block");
$(this).css("background","url(arrow2.png) no-repeat 70% center");
},
function () {
$("ul").css("display","none");
$(this).css("background","url(arrow.png) no-repeat 70% center");
}
);
});
</script>
</head>
<body>
<div id="header">
<div class="logo"><image src="logo.gif"></div>
<div class="member">
脚本学堂
<ul>
<li><a href="http://www.jb200.com/jb/">脚本编程</a></li>
<li><a href="http://www.jb200.com/wb/">网站编程</a></li>
<li><a href="http://www.jb200.com/db/">
数据库</a></li>
<li><a href="http://www.jb200.com/server/">
服务器管理</a></li>
</ul>
</div>
</div>
</body>
</html>
