PROMULGATOR

    A℃★

    广东省广州市白云区/天河区
    Html
    Css
    Js
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
<div id="nav" class="nav">
    <ul class="top_nav" id="top_nav">1
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
        </a>
    </ul>
    <ul>2
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
        </a>
    </ul>
    <ul>3
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
    </ul>
    <ul>4
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body {
    padding:0;
    margin:0;
    font-family:"microsoft yahei";
    background-color:#0c093c;
}
* {
    box-sizing:border-box;
}
.nav {
    width:400px;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    position:absolute;
}
ul {
    width:100px;
    height:20px;
    float:left;
    /* border:1px solid #ecfcff;
    */
            cursor:pointer;
    background:black;
    line-height:20px;
}
li {
    height:40px;
    width:100px;
    background:#5f6caf;
    margin-left:-40px;
    text-align:center;
    line-height:40px;
    display:none;
    /* border:1px solid #ecfcff;
    */
}
ul,li {
    color:#FFFFFF;
    font-size:15px;
    list-style:none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('ul').hover(function() {
    $(this).addClass("top_nav").siblings().removeClass("top_nav");
    $(this).find('li').stop().slideDown(300);
    $(this).css("background", "red").siblings().css("background", "black");
}, function() {
    $(this).find('li').stop().slideUp(300);
});
$('li').mouseover(function() {
    $(this).css({
        "background": "#fe8761",
        "color": "black",
        "font-size": "18px"
    });
}).mouseout(function() {
    $(this).css({
        "background": "#5f6caf",
        "color": "white",
        "font-size": "15px"
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

简易jQuery二级菜单

更新时间：2020-02-09 23:19:58

0