海量企业网站模板 · 任您选择
美出特色，精出品质，一切为了企业更好的营销
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3的水平动态导航菜单</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #D3D4C0;
font-size: 14px;
font-family: Arial, sans-serif;
text-align: center;
}
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('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 />
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360。</p>
</div>
</body>
</html></td>
</tr>
</table>
