导航菜单

巧用负边距制作斜背景导航

by hezhi

HTML

<div class="nav">
	<ul>
		<li>
        	<a href="#">
            	<span class="navL"></span>
                <span class="navC">网站首页</span>
                <span class="navR"></span>
            </a>        	
        </li>
        <li>
        	<a href="#">
            	<span class="navL"></span>
                <span class="navC">建设动态</span>
                <span class="navR"></span>
            </a>        	
        </li>
        <li>
        	<a href="#">
            	<span class="navL"></span>
                <span class="navC">政策指导</span>
                <span class="navR"></span>
            </a>        	
        </li>
        <li>
        	<a href="#">
            	<span class="navL"></span>
                <span class="navC">工作简报</span>
                <span class="navR"></span>
            </a>        	
        </li>
	</ul>
</div>

CSS

*{margin: 0;padding: 0;}
li{list-style: none;}

.nav{height: 59px;margin:50px auto;width:400px;}
.nav li{float: left;margin:0 -11px;}
.nav li a{display: block;position: relative;font:14px/59px "微软雅黑";color: #fff;display: block;}
.navL,.navC,.navR{float: left;display: block;height: 59px;}
.nav li .navL{width: 26px;background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051002.png) no-repeat;}
.nav li .navC{padding:0 7px;background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051001.png) 0 0 repeat-x;}
.nav li .navR{width: 26px;background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051004.png) no-repeat;}
.nav li a:hover .navL{background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051003.png) no-repeat;}
.nav li a:hover .navC{background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051001.png) 0 -59px repeat-x;}
.nav li a:hover .navR{background:url(http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15051005.png) no-repeat;}