<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Menu</title>
<style type="text/css">
ul, li {
list-style-type:none;
padding:0;
margin:0;
}
#menu {
border:1px solid #dedede;
height:35px;
background:url(bg_out.gif) repeat-x;
}
#menu li {
float:left;
line-height:35px;
padding-left: 10px;
padding-right: 15px;
}
#menu li div {
height: 100%;
width: 100%;
}
.li_out {
background:url(arrow_out.gif) no-repeat right center;
}
.li_over {
cursor:hand;
background:url(arrow_over.gif) no-repeat right center;
color:white;
}
.div_over {
background: url(bg_over.gif) repeat-x;
margin-left: -10px;
padding-left: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").children("li").hover(
function(){
$(this).addClass("li_over");
$(this).children("div").addClass("div_over");
},
function(){
$(this).removeClass("li_over");
$(this).children("div").removeClass("div_over");
}
);
});
</script>
</head>
<body>
<ul id="menu">
<li class="li_out"><div>呵呵</div></li>
<li class="li_out"><div>呵呵 File</div></li>
<li class="li_out"><div>呵呵 Account</div></li>
<li class="li_out"><div>呵呵 呵呵呵呵</div></li>
<li class="li_out"><div>呵呵 呵呵呵呵</div></li>
</ul>
</body>
</html>