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

2024-05-06 14:49:32

字体：大中小

来源：转载

供稿：网友

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

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
    function hoversee(){
    var list = document.getElementById('nav');
    var zu = list.getElementsByTagName("li");
    for(var i=0;i<9;i++)
    {
        zu[i].onmouseover = function(){
            this.getElementsByTagName('dl')[0].style.display = "block";
        }
        zu[i].onmouseout = function(){
            this.getElementsByTagName('dl')[0].style.display = "none";
        }
    }
    }
    window.onload = hoversee;
</script>
<style>
    *{
        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 {