绝对漂亮的CSS3导航菜单

时间：2013-04-01 21:29 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绝对漂亮的CSS3导航菜单</title>
<style type="text/css">
ul {
	font-family:Arial, Helvetica, sans-serif;
	background:#ccc;
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
	background:-moz-linear-gradient(top, #fff, #e9e9e9);
	display:block;
	clear:left;
	float:left;
	padding:0 15px;
	margin:0 0 10px 0;
	-webkit-box-shadow:0 0 2px #333;
	-moz-box-shadow:0 0 2px #333;
	box-shadow:0 0 2px #333;
	border:1px solid #fff;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
ul li {
	margin:0;
	float:left;
	display:block;
	list-style:none;
}
ul li a {
	padding:10px;
	display:block;
	color:#666;
	text-decoration:none;
	text-shadow:1px 1px 1px #fff;
}
ul li a:hover {
	color:#000;
}
ul li ul {
	margin:0 0 0 -15px;
	display:none;
	-webkit-border-top-right-radius:0;
	-webkit-border-top-left-radius:0;
	-moz-border-topleft-radius:0;
	-moz-border-topright-radius:0;
	border-top-left-radius:0;
	border-top-right-radius:0;
}
ul li:hover ul {
	display: block;
	position: absolute;
}
/* Secondary Nav Items */
ul li ul li {
	clear: left;
}
.red, .red li ul {
	background: #e01111;
	background: -webkit-gradient(linear, left top, left bottom, from(#e01111), to(#901d1d));
	background: -moz-linear-gradient(top, #e01111, #901d1d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e01111', endColorstr='#901d1d');
}
.red a {
	color: #fff;
	text-shadow: 0 -1px 1px #770d0d;
}
.red a:hover {
	color: #fff;
}
</style>
</head>

<body>
<ul class="red">
  <li><a href="#">源码爱好者</a>
    <ul>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
    </ul>
  </li>
  <li><a href="#">网页特效</a>
    <ul>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
    </ul>
  </li>
  <li><a href="#">编程类库</a>
    <ul>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
      <li><a href="#">Sub Item</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS3菜单，那种渐变色很酷，而且完全是用CSS技术实现的，没有使用任何的JS和图片素材，测试时候请注意不要使用IE浏览器，否则很可能看不到CSS3所带来的魅力。绝对漂亮的CSS3导航菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1021.html