Heim >Web-Frontend >HTML-Tutorial >CSS3实现的横向二级下拉菜单代码实例_html/css_WEB-ITnose
CSS3实现的横向二级下拉菜单代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:041515Durchsuche
CSS3实现的横向二级下拉菜单代码实例:
横向二级下拉菜单是非常常用的效果，例如很多网站的导航栏就是这样的二级下拉菜单效果，非常好用，本章节分享一段使用CSS3实现的下拉菜单，当然当下很多浏览器都不支持，不过相信用不了多久这种现状就会被改变。
代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#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="#">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> 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10900
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3实现的具有闪烁动画效果的导航菜单_html/css_WEB-ITnoseNächster Artikel：css命名规范_html/css_WEB-ITnose