要求：导航栏鼠标经过颜色变成 #f8b62c，离开后变回 #0b77cf，经过下拉栏同理

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="nav">
    <div id="menu">
        <ul class="menu">
            <li><a href="#"><span>首页</span></a></li>
            <li>
                <a href="#"><span>学院概况</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>学院简介</span></a></li>
                        <li><a href="#"><span>学院领导</span></a></li>
                        <li><a href="#"><span>校园风光</span></a></li>
                        <li><a href="#"><span>荣誉称号</span></a></li>
                        <li><a href="#"><span>学院校标</span></a></li>
                        <li><a href="#"><span>学院校训</span></a></li>
                        <li><a href="#"><span>天麟精神</span></a></li>
                        <li><a href="#"><span>学院章程</span></a></li>
                        <li><a href="#"><span>院士风采</span></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><span>机构导航</span></a></li>
            <li><a href="#"><span>系部设置</span></a></li>
            <li><a href="#"><span>继续教育</span></a></li>
            <li><a href="#"><span>数字资源</span></a></li>
            <li><a href="#"><span>信息公开</span></a></li>
            <li>
                <a href="#"><span>招生就业</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>招生网</span></a></li>
                        <li><a href="#"><span>就业网</span></a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>办公信息</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>一周工作</span></a></li>
                        <li><a href="#"><span>通知文件</span></a></li>
                        <li><a href="#"><span>公文纪要</span></a></li>
                        <li><a href="#"><span>OA系统</span></a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>公众服务</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>图书馆</span></a></li>
                        <li><a href="#"><span>在线学习平台</span></a></li>
                        <li><a href="#"><span>万方数据</span></a></li>
                        <li><a href="#"><span>知网</span></a></li>
                        <li><a href="#"><span>超星汇雅电子书</span></a></li>
                        <li><a href="#"><span>读秀学术搜索</span></a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    font-family: "Microsoft YaHei";
}

.nav {
    background: #0b77cf;
    height: 46px;
    width: 100%;
}

div#menu {
    color: #fff;
    width: 1183px;
    margin: auto;
    display: block;
    height: 46px;
}

div#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    z-index: 2;
    position: relative;
}

div#menu li {
    position: relative;
    margin: 0px;
    padding: 0px;
    display: block;
    overflow: visible;
    float: left;
    z-index: 3;
    color: #fff;
}

div#menu li a {
    height: 46px;
    display: block;
    float: left;
    line-height: 46px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    z-index: 4;
    position: relative;
    font-size: 16px;
}

div#menu li span {
    color: #fff;
    display: block;
    width: 107px;
    text-align: center;
    z-index: 6;
    position: relative;
    font-size: 16px;
}

div#menu li li {
    width: 100%;
    text-indent: 0px;
    float: none;
    height: auto;
}

div#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    z-index: 2;
    position: relative;
}

div#menu ul.menu ul {
    display: none;
    padding: 0px 0px 0px;
    background: #1283e1;
    width: 107px;
    position: absolute;
    top: 46px;
}

.bgc {
    background-color: #0b77cf!important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var lis = document.querySelector('.menu').children;
for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
        this.querySelector('span').style.backgroundColor = '#f8b62c'
        if (this.querySelector('ul')) this.querySelector('ul').style.display = 'block'
    }
    lis[i].onmouseout = function () {
        this.querySelector('span').style.backgroundColor = ''
        var t = this
        if (this.querySelector('ul')) {
            this.querySelector('ul').style.display = 'none'
            var ulc = this.querySelector('ul').children
            for (var i = 0; i < ulc.length; i++) {
                ulc[i].onmouseover = function () {
                    this.querySelector('span').style.backgroundColor = '#f8b62c'
                    t.querySelector('span').className = 'bgc'
                }
                ulc[i].onmouseout = function () {
                    this.querySelector('span').style.backgroundColor = ''
                    t.querySelector('span').className = ''
                }
            }
        }
    }
}
复杂版
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="nav">
    <div id="menu">
        <ul class="menu">
            <li><a href="#"><span>首页</span></a></li>
            <li>
                <a href="#"><span>学院概况</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>学院简介</span></a></li>
                        <li><a href="#"><span>学院领导</span></a></li>
                        <li><a href="#"><span>校园风光</span></a></li>
                        <li><a href="#"><span>荣誉称号</span></a></li>
                        <li><a href="#"><span>学院校标</span></a></li>
                        <li><a href="#"><span>学院校训</span></a></li>
                        <li><a href="#"><span>天麟精神</span></a></li>
                        <li><a href="#"><span>学院章程</span></a></li>
                        <li><a href="#"><span>院士风采</span></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><span>机构导航</span></a></li>
            <li><a href="#"><span>系部设置</span></a></li>
            <li><a href="#"><span>继续教育</span></a></li>
            <li><a href="#"><span>数字资源</span></a></li>
            <li><a href="#"><span>信息公开</span></a></li>
            <li>
                <a href="#"><span>招生就业</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>招生网</span></a></li>
                        <li><a href="#"><span>就业网</span></a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>办公信息</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>一周工作</span></a></li>
                        <li><a href="#"><span>通知文件</span></a></li>
                        <li><a href="#"><span>公文纪要</span></a></li>
                        <li><a href="#"><span>OA系统</span></a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><span>公众服务</span></a>
                <div>
                    <ul>
                        <li><a href="#"><span>图书馆</span></a></li>
                        <li><a href="#"><span>在线学习平台</span></a></li>
                        <li><a href="#"><span>万方数据</span></a></li>
                        <li><a href="#"><span>知网</span></a></li>
                        <li><a href="#"><span>超星汇雅电子书</span></a></li>
                        <li><a href="#"><span>读秀学术搜索</span></a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    font-family: "Microsoft YaHei";
}

.nav {
    background: #0b77cf;
    height: 46px;
    width: 100%;
}

div#menu {
    color: #fff;
    width: 1183px;
    margin: auto;
    display: block;
    height: 46px;
}

div#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    z-index: 2;
    position: relative;
}

div#menu li {
    position: relative;
    margin: 0px;
    padding: 0px;
    display: block;
    overflow: visible;
    float: left;
    z-index: 3;
    color: #fff;
}

div#menu li a {
    height: 46px;
    display: block;
    float: left;
    line-height: 46px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    z-index: 4;
    position: relative;
    font-size: 16px;
}

div#menu li span {
    color: #fff;
    display: block;
    width: 107px;
    text-align: center;
    z-index: 6;
    position: relative;
    font-size: 16px;
}

div#menu li li {
    width: 100%;
    text-indent: 0px;
    float: none;
    height: auto;
}

div#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    z-index: 2;
    position: relative;
}

div#menu ul.menu ul {
    display: none;
    padding: 0px 0px 0px;
    background: #1283e1;
    width: 107px;
    position: absolute;
    top: 46px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var lis = document.querySelector('.menu').children;
for (var i = 0; i < lis.length; i++) {
    var flag = true;
    lis[i].onmouseover = function () {
        if (flag) this.querySelector('span').style.backgroundColor = '#f8b62c'
        if (this.querySelector('ul')) this.querySelector('ul').style.display = 'block'
    }
    lis[i].onmouseout = function () {
        this.querySelector('span').style.backgroundColor = ''
        var t = this
        if (!this.querySelector('ul')) return
        this.querySelector('ul').style.display = 'none'
        var ulc = this.querySelector('ul').children
        for (var i = 0; i < ulc.length; i++) {
            ulc[i].onmouseover = function () {
                flag = false;
                this.querySelector('span').style.backgroundColor = '#f8b62c'
            }
            ulc[i].onmouseout = function () {
                flag = true;
                this.querySelector('span').style.backgroundColor = ''
            }
        }
    }
}