纯html5css3下拉导航菜单实现代码.docxVIP

下拉导航在浏览网页时经常会遇见到，记得以前都是使用 js 实现的吧，不过本文接下 来要介绍的是采用 css3+html5 实现，感兴趣的你可不要错过了哈，希望看完对你学习 css3 有所帮助 代码如下 : lt;!DOCTYPE HTMLgt; lt;htmlgt; lt;headgt; lt;meta charset=UTF-8 /gt; lt;titlegt; 纯 html+css 导航 lt;/titlegt; lt;!-- mulder --gt; lt;!-- qq--gt; lt;!-- 只支持 chrome firefox --gt; lt;stylegt; *{ margin:0; padding:0; } .clear:after { clear: both; content: .; display: block; height: 0; visibility: hidden; } nav{ display:inline-block; border:1px solid #505255; border-bottom: 1px solid #282C2F; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:50px; -webkit-box-shadow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; } li{ list-style:none; float:left; border-right: 1px solid #2E3235; position: relative; /*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F 50%,#3E4245 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/ background:#555D5F; } li:hover{ /*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F 80%,#555D5F 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/ background:#3E4245; -moz-transition: background 1s ease-out; -webkit-transition: background 1s ease-out; } li a{ display:block; height:40px; line-height:40px; padding:0 30px; font-size:12px; color:#fff; text-shadow: 0px -1px 0px #000; text-decoration:none; white-space:nowrap; border-left: 1px solid #999E9F; border-top: 1px solid #999E9F; -moz-border-top-left-radius: 2px; -webkit-border-top-left-radius: 2px; z-index:100; } li gt; a{ position:relative; } li.first a{ -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; } li.last{ border-right: 0 none; } dl{ position:absolute; display:block; top:40px; left: -25px; width:165px; background:#222222; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box