Reload Page ❖ Drop Down Menu with jQueryweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
#menu_wrapper {
2
    height:44px;
3
    background: url(https://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNeDrOC4g6uoP55DSLpZ73uIvh8OjYydoXjpDmtOTzUNf7TPA96bd-iiqbDygI9FBFrXSTH9_1kC6teQzPPLgj3dzZfeG38y7QktYFs9BkTtjS7xVXvlddN7gKV1Q0xHpGsHAP1SzaDE/s1600/navbar-bg.png) repeat-x;
4
    width: 960px;
5
    margin: 0 auto;
6
    padding: 0 auto;
7
    border-bottom: 1px solid #f89c21;
8
}
9
​
10
#menu_bar {
11
    width: 960px;
12
    height: 27px;
13
    margin: 0 auto;
14
}
15
​
16
#menu {
17
    width: 100%;
18
}
19
​
20
#menu,#menu ul {
21
    list-style: none;
22
    font-family: Arial, serif;
23
    margin: 0;
24
    padding: 0;
25
}
26
​
27
#menu a {
28
    display: block;
29
    text-decoration: none;
30
    font: normal 11px Arial;
31
    text-transform: none;
32
    color: #CECECF;
33
    border-right: 1px solid #484747;
34
    border-left: 1px solid #191919;
35
    padding: 7px 10px 7px;
36
}
37
​
38
#menu a.arrow {
39
    background-image: url(https://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CpiKUwz6z31-UT9imR5p0KO-bRFT3p4kPrjhBw_MYK4jjLsj7Ps1YTXezEonqXa7xBRFNxj_bd6hAB5qeHXQMKievKho15Pg6Ez2NiI3PBiV1M0NbXpok6opcVq1aWChEMUx_7G9Gz4/s1600/arrow_white.gif);
40
    background-repeat: no-repeat;
41
    background-position: right center;
42
    padding: 7px 24px 7px 10px;
43
}
44
​
45
#menu li {
46
    float: left;
47
    position: static;
48
    width: auto;
49
}
50
​
51
#menu li ul,#menu ul li {
52
    width: 170px;
53
}
54
​
55
#menu ul li a {
56
    text-align: left;
57
    color: #fff;
58
    font-size: 12px;
59
    font-weight: 400;
60
    text-transform: none;
61
    font-family: Arial;
62
    border: none;
63
    padding: 5px 10px;
64
}
65
​
66
#menu li ul {
67
    z-index: 100;
68
    position: absolute;
69
    display: none;
70
    background: #222;
71
    padding-bottom: 0px;
72
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
73
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
74
}
75
​
76
#menu li:hover a,#menu a:active,#menu a:focus,#menu li.hvr a {
77
    background-color: #222;
78
    color: #fff;
79
}
80
​
81
#menu li:hover ul,#menu li.hvr ul {
82
    display: block;
83
}
84
​
85
#menu li:hover ul a,#menu li.hvr ul a {
86
    color: #edfdfd;
87
    background-color: transparent;
88
    text-decoration: none;
89
}
90
​
91
#menu li ul li.hr {
92
    border-bottom: 1px solid #444;
93
    border-menu: 1px solid #000;
94
    display: block;
95
    font-size: 1px;
96
    height: 0;
97
    line-height: 0;
98
    margin: 0px 0;
99
}
100
​
101
#menu ul a:hover {
102
    background-color: #555!important;
103
    color: #fff!important;
104
    text-decoration: none;
105
}
106
​
107
#menu a span,#menu a.arrow span {
108
    font: bold 12px Arial;
109
    color: #888;
110
    display: block;
111
    line-height: 16px;
112
    text-transform: uppercase;
113
    text-shadow: 1px 2px 2px #000;
114
}
115
​
116
#menu li:hover a span,#menu li:hover a.arrow span {
117
    color: #f8a932;
118
}
xxxxxxxxxx
 
​

https:////example.com/script.js X

7
 
1
$(function() {
2
    $('#menu li').hover(function() {
3
        $('ul', this).filter(':not(:animated)').slideDown(600, "easeOutBounce");
4
    }, function() {
5
        $('ul', this).slideUp(600, "easeInExpo");
6
    });
7
});
109
 
1
<div id='menu_wrapper'>
2
    <div id='menu_bar'>
3
        <ul id='menu'>
4
            <li><a href='/'><span>Welcome</span>Homepage</a>
5
            </li>
6
            <li><a href='#'><span>This is</span>About Us</a>
7
            </li>
8
            <li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
9
​
10
                <ul>
11
                    <li><a href='#'>Sub Menu 1</a>
12
                    </li>
13
                    <li class='hr'></li>
14
                    <li><a href='#'>Sub Menu 2</a>
15
                    </li>
16
                    <li class='hr'></li>
17
                    <li><a href='#'>Sub Menu 3</a>
18
                    </li>
19
                    <li class='hr'></li>
20
                    <li><a href='#'>Sub Menu 4</a>
21
                    </li>
22
                    <li class='hr'></li>
23
                    <li><a href='#'>Sub Menu 5</a>
24
                    </li>
25
                    <li class='hr'></li>
26
                    <li><a href='#'>Sub Menu 6</a>
27
                    </li>
28
                    <li class='hr'></li>
29
                    <li><a href='#'>Sub Menu 7</a>
30
                    </li>
31
                    <li class='hr'></li>
32
                    <li><a href='#'>Sub Menu 8</a>
33
                    </li>
34
                    <li class='hr'></li>
35
                    <li><a href='#'>Sub Menu 9</a>
36
                    </li>
37
                </ul>
38
            </li>
39
            <li><a href='#'><span>Action</span>Big surprise</a>
40
            </li>
41
            <li><a href='#'><span>Culture</span>Documentary</a>
42
            </li>
43
            <li><a class='arrow' href='#'><span>Box Office</span>The best movie</a>
44
​
45
                <ul>
46
                    <li><a href='#'>Sub Menu 1</a>
47
                    </li>
48
                    <li class='hr'></li>
49
                    <li><a href='#'>Sub Menu 2</a>
50
                    </li>
51
                    <li class='hr'></li>
52
                    <li><a href='#'>Sub Menu 3</a>
53
                    </li>
54
                    <li class='hr'></li>
55
                    <li><a href='#'>Sub Menu 4</a>
56
                    </li>
57
                    <li class='hr'></li>
58
                    <li><a href='#'>Sub Menu 5</a>
59
                    </li>
60
                    <li class='hr'></li>
61
                    <li><a href='#'>Sub Menu 6</a>
62
                    </li>
63
                    <li class='hr'></li>
64
                    <li><a href='#'>Sub Menu 7</a>
65
                    </li>
66
                    <li class='hr'></li>
67
                    <li><a href='#'>Sub Menu 8</a>
68
                    </li>
69
                    <li class='hr'></li>
70
                    <li><a href='#'>Sub Menu 9</a>
71
                </ul>
72
            </li>
73
            <li><a href='#'><span>Horror</span>Watch your back</a>
74
            </li>
75
            <li><a href='#'><span>Best Seller</span>People likes</a>
76
            </li>
77
            <li><a class='arrow' href='#'><span>Cartoon</span>Animated movie</a>
78
​
79
                <ul>
80
                    <li><a href='#'>Sub Menu 1</a>
81
                    </li>
82
                    <li class='hr'></li>
83
                    <li><a href='#'>Sub Menu 2</a>
84
                    </li>
85
                    <li class='hr'></li>
86
                    <li><a href='#'>Sub Menu 3</a>
87
                    </li>
88
                    <li class='hr'></li>
89
                    <li><a href='#'>Sub Menu 4</a>
90
                    </li>
91
                    <li class='hr'></li>
92
                    <li><a href='#'>Sub Menu 5</a>
93
                    </li>
94
                    <li class='hr'></li>
95
                    <li><a href='#'>Sub Menu 6</a>
96
                    </li>
97
                    <li class='hr'></li>
98
                    <li><a href='#'>Sub Menu 7</a>
99
                    </li>
100
                    <li class='hr'></li>
101
                    <li><a href='#'>Sub Menu 8</a>
102
                    </li>
103
                    <li class='hr'></li>
104
                    <li><a href='#'>Sub Menu 9</a>
105
                </ul>
106
            </li>
107
        </ul>
108
    </div>
109
</div>