下拉菜单
html：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：下拉菜单</title>
<script type="text/javascript" src="../base.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="header">
<div class="logo"><img src="images/logo.gif" alt="" /></div>
<div class="member">个人中心
<ul>
<li><a href="###">设置</a></li>
<li><a href="###">换肤</a></li>
<li><a href="###">帮助</a></li>
<li><a href="###">退出</a></li>
</ul>
</div>
</div>
</body>
</html>
css:
body {
margin:0;
padding:0;
background:url(images/header_bg.png) repeat-x;
font-size:12px;
color:#333;
}
ul {
padding:0;
margin:0;
}
ul li {
list-style-type:none;
}
#header {
width:900px;
height:30px;
margin:0 auto;
}
#header .logo {
width:100px;
height:30px;
float:left;
}
#header .logo img {
display:block;
}
#header .member {
width:70px;
height:30px;
line-height:30px;
float:right;
background:url(images/arrow.png) no-repeat 55px center;
cursor:pointer;
}
#header ul {
position:absolute;
top:30px;
left:870px;
background:#FBF7E1;
width:100px;
height:120px;
border:1px solid #999;
border-top:none;
padding:10px 0 0 0;
display:none;
}
#header ul li {
height:25px;
line-height:25px;
text-indent:20px;
letter-spacing:1px;
}
#header ul li a {
display:block;
text-decoration:none;
color:#333;
background:url(images/arrow3.gif) no-repeat 5px 45%;
}
#header ul li a:hover {
background:#fc0 url(images/arrow4.gif) no-repeat 5px 45%;
}
js:
window.onload = function () {
$().getClass('member').hover(function () {
//$().getClass('member').css('background', 'url(images/arrow2.png) no-repeat 55px center');
//this.css('color', 'red');
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
$().getTagName('ul').show();
}, function () {
//$().getClass('member').css('background', 'url(images/arrow.png) no-repeat 55px center');
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');
$().getTagName('ul').hide();
});
};
