cscscssjsp 2015-04-06
纯CSS下拉导航(兼容IE,ff,chrome及opera)的好处有很多:
1.不必用JavaScript或者jQuery实现,如果网页禁用了JavaScript或者网络慢都有可能影响性能;
2.纯CSS下拉导航不必依靠额外的js库,所以减少了不必要的http请求,加快了用户访问速度;
HTML代码如下:
<ul class="nav"> <li><a href="javascript:void(0)">Home</a></li> <li><a href="javascript:void(0)">About</a></li> <li> <a href="javascript:void(0)">Services</a> <ul> <li><a href="javascript:void(0)">Develop</a></li> <li><a href="javascript:void(0)">Web</a></li> <li><a href="javascript:void(0)">Design</a></li> </ul> </li> <li> <a href="javascript:void(0)">Contact</a> <ul> <li><a href="javascript:void(0)">Email</a></li> <li><a href="javascript:void(0)">QQ</a></li> <li><a href="javascript:void(0)">Phone</a></li> </ul> </li> </ul>
CSS代码如下:
/* 公共样式 */ ul{margin: 0;padding: 0;} ul li{margin: 0;padding: 0;list-style:none;} a{text-decoration: none;} /* 内容部分 */ ul.nav{display:block;position: relative;font-size: 14px;} ul.nav>li:first-child{border-top-left-radius: 10px;} ul.nav>li:last-child{border-top-right-radius: 10px;} ul.nav li{height: 40px;line-height: 40px;background: #aaa;} ul.nav>li{width: 25%;float:left;box-shadow: inset 1px 0 0 #fff;} ul.nav li a{display: block;text-align: center;color: #000;} ul.nav>li>a{font-weight: bold;} ul.nav ul{position: absolute;width: 25%;left: -999px;} ul.nav li:hover ul{left: auto;} ul.nav ul li{border-top: 1px solid #ccc;} ul.nav li:hover{background: #bbb;} ul.nav li:hover>a{color: #fff;}
最终效果如下:
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT