JS实现仿京东淘宝竖排二级导航

前端之家收集整理的这篇文章主要介绍了JS实现仿京东淘宝竖排二级导航前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

代码很简单,就不多废话了,直接奉上代码

代码如下:
<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <Meta name="description" content=""> <Meta name="keywords" content=""> SEOver = function(){ this.getElementsByTagName('dl')[0].style.display = "block"; } zu[i].onmouSEOut = function(){ this.getElementsByTagName('dl')[0].style.display = "none"; } } } window.onload = hoversee; @H_502_11@ *{ font-family:Microsoft YaHei; margin:0; padding:0; } body{width:100%;} ul{list-style: none;} a{text-decoration: none;} #header{ height:50px; line-height:50px; background:#455A6E; } #header h2,#header h3{ font-weight:500; } #header h2{ color:#fff; font-size:18px; width:180px; text-align: center; background:#0D2E49; } #header h3{color:#fff;font-size:16px;} .mycenter{ width:900px; margin:0 auto; } #header div.mycenter{ /*相对定位*/ position:relative; } #nav { width:180px; background:rgba(0,102,173,0.5); z-index:999; } #nav li{ height:40px; padding-left:40px; line-height: 40px; position:relative; } #nav h3{height:40px;} #nav li dl{ position:relative; left:140px; top:-40px; width:150px; background:#fff; display:none; padding:8px 10px; } #nav dt{ width:150px; line-height: 30px; height:30px; background:#36C1AF; color:#fff; text-align: center; } #nav dd a{ display:block; height:30px; width:150px; font-size:14px; color:#858585; } #nav dd a:hover{ text-decoration: underline; } #content{ background:#E95200; height:500px; }

小伙伴们根据自己的需求,将调用代码加进去就可以了,自由发挥吧。

猜你在找的JavaScript相关文章