《html下拉菜单导航.docx》由会员分享，可在线阅读，更多相关《html下拉菜单导航.docx（7页珍藏版）》请在三一办公上搜索。
1、html下拉菜单导航纯html+css导航下拉菜单代码，没有用任何的修饰图片和JavaScript代码，不过兼容性方面做的不是太好，只适用于chrome和firefox浏览器，IE下会有问题，因此测试时除上述两种浏览器外请不要用别的浏览器。 纯html+css导航 * margin:0; padding:0; .clear:after clear: both; content: .; display: block; height: 0; visibility: hidden; nav display:inline-block; border:1px solid #505255; border-
2、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,
3、 #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
4、-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F);*/ 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
5、#999E9F; background:#3E4245; -moz-transition: background 1s ease-out; -webkit-transition: background 1s ease-out; 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; dl
6、position:absolute; display:block; -moz-border-radius-bottomleft: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; li.last border-right: 0 none; top:40px; left: -25px; width:165px; background:#222222; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-sh
7、adow:1px 1px 3px #292929; -moz-box-shadow:1px 1px 3px #292929; z-index:10; li:hover dl dl a background:transparent; 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; top:50px; displ
8、ay:block; width:145px; padding:10px; dl a:hover 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; color:#FFF; background:#999E9F; -moz-transition: background 0.3s ease-in-out, co
9、lor 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /*-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
10、.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 di
11、splay: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-shad
12、ow: 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); 菜单一 菜单二 子菜单一 子菜单二 子菜单三子菜单三 菜单三 子菜单一 子菜单二 子菜单三子菜单三 菜单四 子菜单一 子菜单二 子菜单三 子菜单四 菜单五 菜单六 菜单七 菜单八
