想要天天向上，就要懂得享受学习。为大家推荐纯html5+css3下拉导航菜单实现代码，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！
效果图如下：
代码如下：
代码如下：
!DOCTYPE HTML
html
head
meta charset="UTF-8" /
title纯html+css导航/title
!-- mulder --
!-- --
!-- 只支持 chrome firefox --
style
*{
margin:0;
padding:0;
}
. {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
nav{
;
solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
;
- 1px 3px #292929;
- 1px 3px #292929;
}
li{
;
;
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;
}
{
/*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{
;
;
line-;
padding:0 30px;
;
color:#fff;
text-shadow: 0px -1px 0px #000;
;
;
border-left: 1px solid #999E9F;
border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
;
}
li a{
;
}
a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
{
border-right: 0 none;
}
dl{
;
;
;
left: -25px;
;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
- 1px 3px #292929;
- 1px 3px #292929;
z-index:10;
}
dl{
;
;
;
;
}
dl a{
;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
;
-;
/*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/
-moz-transition-property: all;
/*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/
/*-webkit-transition-delay:5s;
-*
}
dd{
margin-top:0;
opacity:1;
}
li (){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li (){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li (){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li (){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
;
margin-top:-25px;
;
;
}
dt{
;
}
.Darrow{
;
10px 0 0;
;
border-color:#FFF transparent transparent transparent;
;
width:0;
height:0;
line-height:0;
;
;
text-shadow: 0px -1px 0px #000;
- -1px 0px #000;
- -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
;
;
;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
/style
/head
body
nav
ul
lia href="#"菜单一/a/li
li
span/span
a href="#"菜单二/a
dl
dtspan/span/dt
dda href="#"子菜单一/a/dd
dda href="#"子菜单二/a/dd
dda href="#"子菜单三子菜单三/a/dd
/dl
/li
li
span/span
a href="#"菜单三/a
dl
dtspan/span/dt
dda href="#"子菜单一/a/dd
dda href="#"子菜单二/a/dd
dda href="#"子菜单三子菜单三/a/dd
/dl
/li
li
span/span
a href="#"菜单四/a
dl
dtspan/span/dt
dda href="#"子菜单一/a/dd
dda href="#"子菜单二/a/dd
dda href="#"子菜单三/a/dd
dda href="#"子菜单四/a/dd
/dl
/li
lia href="#"菜单五/a/li
lia href="#"菜单六/a/li
lia href="#"菜单七/a/li
lia href="#"菜单八/a/li
/ul
/nav
/body
/html
