<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
margin:0;
padding:0
}
.menu
{
list-style:none;
margin:0;
float:right;
}
.menu li
{
float:left;
margin:0 auto;
cursor:pointer;
height:30px;
padding:30px 5px 5px 5px;
margin:0px 3px;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-radius:0px 0px 5px 5px;
background-color:#B1CCED;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var moveTop = "60px";
var moveout = "30px";
var bgColor = "#B1CCED";
var bgmovecolor = "#7FB0F0";
var obj = $(this);
var items = $("li", obj);
items.mouseover(function () {
$(this).animate({ paddingTop: moveTop }, 500);
$(this).css("background-color", bgmovecolor);
$(this).css({color: "#e0e0e0"});
}).mouseout(function () {
$(this).animate({ paddingTop: moveout }, 500);
$(this).css("background-color", bgColor);
$(this).css({color: "#fff"});
});
});
</script>
</head>
<body>
<ul>
<li>About us</li>
<li>Contacts</li>
<li>Others</li>
<li>Products</li>
<li>Portfolio</li>
<li>Testemonies</li>
</ul>
</body>
</html>
其中那些图角css样式在ie并不适用，所以在ie浏览器下看到的是方形的。
