斜角导航

<div id="nav">
 <ul>
 <li><a href="">首页HOME</a></li>
 <li><a href="">文化中心CULTURAL</a></li>
 <li class="cur"><a href="">作品展示WORKS SHOW</a></li>
 <li><a href="">服务报价SERVICE</a></li>
 <li><a href="">团购活动BUYINH</a></li>
 <li><a href="">场景介绍INTRODUCTION</a></li>
 <li><a href="">客片分享CUSTOMER</a></li>
 <li><a href="">新娘达人MASTER</a></li>
 <li><a href="">联系我们CONTACT</a></li>
 </ul>
</div>

body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}
table{margin:0 auto}
td{border:#000 solid 1px;}

#nav {
100%;
height:54px;
clear:both;
border-top:solid 1px #cac9c9;
border-bottom:solid 1px #cac9c9
}
#nav ul {
1008px;
height:54px;
margin:0 auto;

}
#nav li {
font-size:16px;
font-weight:bold;
text-align:center;
100px;
height:54px;
float:left;
margin:0 6px;
position:relative;
_display:inline;
}
#nav li a {
color:#616161;
text-decoration:none;
display:block;
height:36px;
padding:9px 0
}
#nav li strong {
line-height:18px;
display:block;
}
#nav li em {
font-size:14px;
line-height:18px;
display:block;
}
#nav .cur a,#nav a:hover {
color:#fff;
background:#c00202
}
#nav a:hover:after,#nav a:hover:before,#nav .cur a:after,#nav .cur a:before {
position:absolute;
content:"";
border-style:solid;
border-0 0 54px 28px;
}
#nav a:hover:after,#nav .cur a:after {
border-color:transparent transparent transparent #ccc;
top:0;
right:-28px;
}
#nav a:hover:before,#nav .cur a:before {
border-color:transparent transparent #ffd800 transparent;
top:0;
left:-28px;
}