CSS3带阴影效果三级下拉菜单代码酷黑颜色很漂亮

来源：互联网发布：radius认证服务器端口编辑：程序博客网时间：2024/04/29 00:59

基于CSS3技术实现的多级下拉导航菜单，文字上还有阴影效果，有立体感。示例代码是三级菜单，还可扩展成四级、五级，懂CSs3的可轻松扩展这款菜单，同时本菜单也会想学习CSS3的朋友提供一个菜单制作素材。本菜单的黑色风格很酷，很漂亮，希望大家喜欢。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3多级下拉导航菜单</title><style>#nav {    float: left;   font: bold 12px Arial, Helvetica, Sans-serif;    border: 1px solid #121314;    border-top: 1px solid #2b2e30;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    overflow: hidden;}#nav ul {margin:0;padding:0;list-style:none;}#nav ul li {float:left;}#nav ul li a {   float: left;color:#d4d4d4;    padding: 10px 20px;text-decoration:none;    background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;border-left: 1px solid rgba(255, 255, 255, 0.05);    border-right: 1px solid rgba(0,0,0,0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);}#nav ul li a:hover,#nav ul li:hover > a {    color: #252525;    background:#3C4042;background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;}#nav li ul a:hover, #nav ul li li:hover > a  {    color: #2c2c2c;  background: #5C9ACD;background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );    border-bottom: 1px solid rgba(0,0,0,0.6);    border-top: 1px solid #7BAED9;    text-shadow: 0 1px rgba(255, 255, 255, 0.3);}#nav li ul {    background:#3C4042;    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );    background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );    background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );    border-radius: 0 0 10px 10px;    -moz-border-radius: 0 0 10px 10px;    -webkit-border-radius: 0 0 10px 10px;    left: -999em;    margin: 35px 0 0;    position: absolute;    width: 160px;    z-index: 9999;    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;     border: 1px solid rgba(0, 0, 0, 0.5);}#nav li:hover ul {    left: auto;}#nav li ul a {    background: none;    border: 0 none;    margin-right: 0;    width: 120px;    box-shadow: none;    -moz-box-shadow: none;    -webkit-box-shadow: none;    border-bottom: 1px solid transparent;    border-top: 1px solid transparent;}#nav li li ul {    margin: -1px 0 0 160px;    -webkit-border-radius: 0 10px 10px 10px;    -moz-border-radius: 0 10px 10px 10px;    border-radius: 0 10px 10px 10px;    visibility:hidden;}#nav li li:hover ul {    visibility:visible;}#nav ul ul li:last-child > a {-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;}#nav ul ul ul li:first-child > a {-moz-border-radius:0 10px 0 0;-webkit-border-radius:0 10px 0 0;border-radius:0 10px 0 0;}</style></head><body><div style="margin: 0pt auto; width: 740px;"><div id="nav"><ul><li><a href="#">网站首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">CSS3作品</a></li><li><a href="#">下拉菜单</a><ul><li><a href="#">ASP</a></li><li><a href="#">PHP</a></li><li><a href="#">JSP</a></li></ul></li><li><a href="#">三级下拉</a><ul><li><a href="http://www.codefans.net">AJAX</a></li><li><a href="#">EXTJS</a></li><li><a href="#">脚本资源</a><ul><li><a href="#">Javascript</a></li><li><a href="#">jquery</a></li><li><a href="#">prototype</a></li><li><a href="#">Mooltoos</a></li></ul></li><li><a href="#">HTML5</a></li><li><a href="#">Chrome</a></li></ul></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></div></div><br><br></body></html>

CSS3带阴影效果三级下拉菜单代码 酷黑颜色很漂亮

CSS3带阴影效果三级下拉菜单代码酷黑颜色很漂亮