CSS实现的水平动态导航菜单效果 - 代码贴

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现的水平动态导航菜单</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #D3D4C0;
font-size: 14px;
font-family: Arial, sans-serif;
text-align: center;
13. }
img{border:none}
#wrap {
width: 970px;
margin-left: auto;
margin-right: auto;
}
/* Menu Start Here */
#menu li {
display: inline;
list-style: none;
padding: 0;
 }

#menu li a {

 border: 1px solid white;
 padding: 15px 20px 15px 20px;
 text-decoration: none;
 color:black;
 margin-left: -5px;
 /* This is the background used for the animation */
 background-image: url('/jscss/demoimg/201210/image.jpg');
 /* Align the image position to the left of the a */
 background-position: left;
 -webkit-transition: all 0.8s ease-in-out;
 /* Animation with transition in Firefox (No supported Yet) */
 -moz-transition: all 0.8s ease-in-out;
 /* Animation with transition in Opera (No supported Yet)*/
 -o-transition: all 0.8s ease-in-out;
 }

 #menu li a:hover {
 color: white;
 /* Align the image position of the background to the right*/
 background-position:right;
 }

 </style>
 </head>
 <body>
<div id="wrap">
<h1>CSS Menu Demo </h1>
<ul id="menu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Products</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div><br />
</body>
</html>