复制代码
代码如下：
<！DOCTYPEHTML><html><head><metacharset=“UTF-8”/><title>纯html+css导航</title><！-mulder-><！-qq：10221408--><！-只支持chromefirefox-><style>*{margin：0;填充：0;}.clear：after{clear：both;内容：“。”;显示：块；高度：0；可见性：隐藏；}nav{display：inline-block;border：1pxsolid＃505255;边框底部：1px实心＃282C2F;-moz-border-radius：5px;-webkit-border-radius：5px;边距：50px;-webkit-box-shadow：
-moz-box-shadow：1px1px3px＃292929;}li{list-style：none;向左飘浮;右边框：1px实心＃2E3235;职位：相对/*背景：-moz-linear-gradient（顶部，＃fff，＃555D5F2％，＃555D5F50％，＃3E4245100％）；背景：-webkit-gradient（linear，00，0100％，from（#fff），color-stop（2％，＃555D5F），color-stop（50％，＃555D5F），to（＃3E4245））;*/背景：＃555D5F;}li：hover{/*background：-moz-linear-gradient（top，#fff，＃3E42452％，＃555D5F80％，＃555D5F100％）;背景：-webkit-gradient（linear，00，0100％，from（#fff），color-stop（2％，＃3E4245），color-stop（80％，＃3E4245），to（＃555D5F））;*/背景：＃3E4245;-moz-transition：背景1s缓解；
-webkit-transition：背景1s缓和；}lia{display：block;高度：40px；line-height：40px;填充：030px;font-size：12px;颜色：#fff;文字阴影：0px-1px0px＃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.firsta{-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：0none;}dl{position：absolute;显示：块;上：40px;左：-25px；宽度：165px；背景：＃222222;-moz-border-radius：5px;-webkit-border-radius：5px;-webkit-box-shadow：1px1px3px＃292929;-moz-box-shadow：1px1px3px＃292929;z-index：10；}li：hoverdl{top：50px;显示：块;宽度：145像素；内边距：10px;}dla{background：transparent;边界：0无;-moz-border-radius：5px;-webkit-border-radius：5px;
-moz过渡：背景0.5s缓和；-webkit-transition：背景0.5s缓和；z-index：50；}dla：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：hoverdd{margin-top：0;不透明度：1;}lidd：nth-child（1）{-webkit-transition-duration：0.1s;-moz-transition-duration：0.1s；}lidd：nth-child（2）{-webkit-transition-duration：0.2s;-moz-transition-duration：0.2秒；}lidd：nth-child（3）{-webkit-transition-duration：0.3s;-moz-transition-duration：0.3秒；}lidd：nth-child（4）{-webkit-transition-duration：0.4s;-moz-transition-duration：0.4秒；}dt{display：none;margin-top：-25px;padding-top：15px;高度：10px;}li：hoverdt{display：block;
}.Darrow{float：right;边距：18px10px00;border-width：5px;border-color：#FFF透明透明透明；边框样式：实心；宽度：0;高度：0;line-height：0;溢出：隐藏cursor：pointer;文字阴影：0px-1px0px＃000;-webkit-box-shadow：0px-1px0px＃000;-moz-box-shadow：0px-1px0px＃000;}.arrow{margin：0auto;margin-top：-5px;显示：块;宽度：10px;高度：10px;背景：＃222222;-webkit-transform：旋转（45deg）;-moz-transform：旋转（45deg）；}</style>
</head><body><nav><ulclass=“clear”><liclass=“first”>菜单一</li><li><spanclass=“Darrow”></span>菜单二<dl><dt><spanclass=“arrow”></span></dt><dd>子菜单一</dd><dd>子菜单二</dd><dd>子菜单三子菜单三</dd></dl></li><li><spanclass=“Darrow”></span>菜单三<dl><dt><spanclass=“arrow”></span></dt><dd>子菜单一</dd><dd>子菜单二</dd><dd>子菜单三子菜单三</dd></dl></li><li>
<spanclass=“Darrow”></span>菜单四<dl><dt><spanclass=“arrow”></span></dt><dd>子菜单一</dd><dd>子菜单二</dd><dd>子菜单三</dd><dd>子菜单四</dd></dl></li></li><li>菜单五</li><li>菜单六</li><li>菜单七</li><liclass=“last”>菜单八</li></ul></nav></body></html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60765.shtml
