拖放导航在浏览网页时经常会遇见到，记得以前都是使用js实现的吧，不过这里接下来要介绍的是采用css3 + html5实现，意识到的你可不要错过了哈，希望看完对你学习css3有所帮助
效果图如下：
代码如下：
复制代码
代码如下：
<！DOCTYPE HTML>
<html>
<head>
<meta charset =“ UTF-8” />
<title>纯html + css导航</ title>
<！-mulder->
<！-qq：10221408- ->
<！-只支持chrome firefox->
<style>
* {
margin：0;
填充：0;
}
.clear：after {
clear：both;
内容： ”。”;
显示：块；
高度：0；
可见性：隐藏；
}
nav {
display：inline-block;
边框：1px实线＃505255;
边框底部：1px实心＃282C2F;
-moz-border-radius：5px;
-webkit-border-radius：5px;
边距：50px;
-webkit-box-shadow：
-moz-box-shadow：1px 1px 3px＃292929;
}
li {
list-style：none;
向左飘浮;
右边框：1px实心＃2E3235;
职位：相对
/ *背景：-moz-linear-gradient（顶部，＃fff，＃555D5F 2％，＃555D5F 50％，＃3E4245 100％）；
背景：-webkit-gradient（linear，0 0，0 100％，from（#fff），color-stop（2％，＃555D5F），color-stop（50％，＃555D5F），to（＃3E4245）） ; * /
背景：＃555D5F;
}
li：hover {
/ * background：-moz-linear-gradient（top，#fff，＃3E4245 2％，＃555D5F 80％，＃555D5F 100％）;
背景：-webkit-gradient（linear，0 0，0 100％，from（#fff），color-stop（2％，＃3E4245），color-stop（80％，＃3E4245），to（＃555D5F）） ; * /
背景：＃3E4245;
-moz-transition：背景1s缓和；
-webkit-transition：背景1s缓和；
}
li a {
display：block;
高度：40px；
line-height：40px;
填充：0 30px;
font-size：12px;
颜色：#fff;
文字阴影：0px -1px 0px＃000;
文字修饰：无；
空白：nowrap;
左边框：1px实线＃999E9F;
border-top：1px实线＃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：4像素；
-webkit-border-top-left-radius：4px;
-webkit-border-bottom-left-radius：4px;
}
li.last {
border-right：0 none;
}
dl {
position：absolute;
显示：块;
上：40px;
左：-25px；
宽度：165像素；
背景：＃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;
显示：块;
宽度：145像素；
内边距：10px;
}
dl a {
background：transparent;
边界：0无;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-moz-transition：背景0.5s缓和；
-webkit-transition：背景0.5s缓和；
z-index：50；
}
dl a：hover {
color：#FFF;
背景：＃999E9F;
-moz过渡：背景0.3s缓入，彩色0.3s缓入；
-webkit-transition：背景0.3s缓入，彩色0.3s缓入；
}
dd {
margin-top：-40px;
不透明度：0;
宽度：145像素；
-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;
不透明度：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.2秒；
}
li dd：nth-child（3）{-
webkit-transition-duration：0.3s;
-moz-transition-duration：0.3秒；
}
li dd：nth-child（4）{-
webkit-transition-duration：0.4s;
-moz-transition-duration：0.4秒；
}
dt {
display：none;
margin-top：-25px;
padding-top：15px;
高度：10px;
}
li：hover dt {
display：block;
}
.Darrow {
float：right;
边距：18px 10px 0 0;
border-width：5px;
border-color：#FFF透明透明透明；
边框样式：实心；
宽度：0;
高度：0;
line-height：0;
溢出：隐藏
cursor：pointer;
文字阴影：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;
显示：块;
宽度：10px;
高度：10px;
背景：＃222222;
-webkit-transform：旋转（45deg）;
-moz-transform：旋转（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> <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>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML