首页 > 网页特效 > 导航菜单 > 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;
  }

分类导航

特效推荐

热门特效

热门教程