<!DOCTY
PE ht
ML P
ubLIC "-//W3C//DTD XHTML 1.0 Trans
ITional//EN"
"http://www.w3.
org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
<html
XMlns="http://www.w3.org/1999/xhtml">
<head>
<title>菱形导航菜单</title>
<
;meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
ul,li,a,span{m
argin:0;padding:0;list
-style:outside none;h
eight:25px;line-height:25px;dis
play:block;}
ul{padding-left:25px;}
ul li{float:left;display:inline;mar
gin-right:26px;}
ul li a,ul li a span{background:url(images/na
vbg.png) -25px 0 no-repeat;}
ul li a{padding:0 25px;font-
Size:12px;color:
#FFF;position:relative;float:left;text-align:
center;}
ul li a span{position:absolute;top:0;width:25px;}
ul li a .al{left:-25px;background-position:left 0;}
ul li a .ar{right:-25px;background-position:right 0;}
ul li a:hover{background-position:-25px -25px;}
ul li a:hover .al{background-position:left -25px;}
ul li a:hover .ar{background-position:right -25px;}
ul li a:active,ul li.
current a{background-position:-25px -50px;}
ul li a:active .al,ul li.current a .al{background-position:left -50px;}
ul li a:active .ar,ul li.current a .ar{background-position:right -50px;}
</style>
</head>
<body>
<ul>
<li><a
href="javascript:void(0)"><span class="al"></span>首页<span class="ar"></span></a></li>
<li><a href="javascript:void(0)"><span class="al"></span>关于我们<span class="ar"></span></a></li>
<li><a href="javascript:void(0)"><span class="al"></span>
公司新闻<span class="ar"></span></a></li>
<li><a href="javascript:void(0)"><span class="al"></span>网上
商城<span class="ar"></span></a></li>
</ul>
</body>
</html>