首頁 > 網頁特效 > 導航菜單 > CSS3下拉導航菜單代碼 帶文字陰影漸變和圓角效果

CSS3下拉導航菜單代碼 帶文字陰影漸變和圓角效果

時間:2012-07-20    來源:互聯網

一款基于CSS3的導航條代碼,支持下拉二級菜單導航,導航文字帶有陰影漸變的效果,導航條亦有CSS3圓角特效,很精致漂亮,做為網站的導航菜單很有特色。

注意只支持CSS3的瀏覽器可用,不支持如IE6之類的舊瀏覽器。

html代碼
<ul class="menu">
 <li><a href="#">My dashboard</a></li>
  <li><a href="#">Likes</a></li>
  <li><a href="#">Views</a>
 <ul>
  <li><a href="#" class="documents">Documents</a></li>
  <li><a href="#" class="messages">Messages</a></li>
  <li><a href="#" class="signout">Sign Out</a></li>
  </ul>
 </li>
  <li><a href="#">Uploads</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Documents</a></li>
</ul>
CSS代碼
.menu,
  .menu ul,
  .menu li,
  .menu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  }
.menu {
  height: 40px;
  width: 505px;
 background: #4c4e5a;
  background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }
.menu li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  height: 40px;
  }

特效推薦

熱門特效

百人牛牛辅助 贵州11选5前三直走势图 新疆11选5开奖记 贵州11选5下载 安徽11选五历史开奖查询 江苏11选五预测推荐 广东11选55开奖 新疆11选5前三走势图 天空彩票与你同行精选资料 管家婆马报 甘肃11选5玩法技巧