纯html5+css3下拉导航菜单实现代码

更新时间:2023-04-03 05:58:47 阅读：评论：0

效果图如下：

代码如下：

复制代码代码如下:

<!doctype html>

<html>

<head>

<meta chart=”utf-8″ />

<title>纯html+css导航</title>

<!– mulder –>

<!– qq:10221408 –>

<!– 只支持 chrome firefox –>

<style>

*{

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), c向量坐标相乘olor-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 ea-out;

-webkit-transition: background 1s ea-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 > 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-shadow:1px 1px 3px #292929;

-moz-box-shadow:1px 1px 3px #292929;

z-index:10;

}

li:hover dl{

top:50px;

display:block;

width:145px;

padding:10px;

}

dl a{

backgro关于朋友的英语谚语und:transparent;

border:0 none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-moz-transition: background 0.5s ea-out;

-webkit-transition: background 0.5s ea-out;

z-index:50;

}

dl a:hover{

color:#fff;

background:#999e9f;

-moz-transition: background 0.3s ea-in-out, color 0.3s ea-in-out;

-webkit-transition: background 0.3s ea-in-out, color 0.3s ea-in-out;

}

dd{

margin-top:-40px;

opacity:0;

width:145px;

-webkit-transition-property:all;

/*-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;

-moz-transition-delay:5s;*/

}

li:hover dd{

margin-top:0;

opacity:1;

}

li dd:nth-child(1){

-webkit-transition-duration: 0.1s;

-moz-transition-duration: 0.1s;

}

li dd:nth-child(2){

-webkit-transition-duration: 0.2s;

-moz-transition-duration: 0.2s;

}

li dd:nth-child(3){

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

}

li dd:nth-child(4){

-webkit-transition-duration: 0.4s;

-moz-transition-duration: 0.4s;

}

dt{

display:none;

margin-top:-25px;

padding-top:15px;

height:10px;

}

li:hover dt{

人教版五年级上册语文教学计划display:block;

}

.darrow{

float:right;

margin:18px 10px 0 0;

border-width:5px;

border-color:#fff transparent transparent transparent;

border-style:solid;

width:0;

height:0;

line-height:0;

overflow:hidden;

cursor:pointer;

text-shadow: 0px -1px 0px #000;

-webkit-box-shadow:0px 科员和办事员的区别-1px 0px #000;

-moz-box-shadow:0px -1px 0px #000;

}

.arrow{

margin:0 auto;

margin-top:-5px;

display:block;

width:10px;

height:10px;

background:#222222;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

}

</style>

</head>

<body>

<nav>

<ul class=”clear”>

<li class=”first”><a href=”#”>菜单一</a></li>

<li>

<span class=”darrow”></span>

<a href=”#”>菜单二</a>

<dl>

<dt><span class=”arrow”></span></dt>

<dd><a href=”#”>子菜单一</a></dd>

<dd><a href=”#”>子菜单二</a></dd>

<dd><a href=”#”>子菜单三子菜单三</a></dd>

</dl>

</li>

<li>

<span class=”darrow”></span>

<a href=”#”>菜单三</a>

<dl>

<dt><span class=”arrow”></span></dt>

<dd><a href=”#”>子菜单一</a></dd>

<dd><a href=”#”>子菜单二</a></dd>

<dd><a href=”#”>子菜单三子菜单三</a></dd>

</dl>

</li>

<li>

<span class=”darrow”></span>

<a href=”#”>菜单四</a>

<dl>

<dt><span class=”arrow”></span></dt>

<dd><a href=”#”>子菜单一</a></dd>

<dd><a href=”#”>子菜单二</a></dd>

<dd><a href=”#”>子菜单三</a></dd>

<dd><a href=”#”>子菜单四</a></dd>

</dl>

</li>

<li><a href=”#”>菜单五</a></li>

<li><a href=”#”>菜单六</a></li>

<li><a href=”#”>菜单七</a></li>

<li class=”last”><a href=”#”>菜单八</a></li>

</ul>

</nav>

</body>

</html>