Bootstrap Snippet Multi Level Dropdown Menu CSS & jQuery using HTML CSS Bootstrap jQuery

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <ul id="nav">
<li class="site-name"><a href="#">·</a></li>
    <li class="facebook"><a href="#">Facebook</a>
        <ul>
        <li><a href="#">Facebook Pages</a></li>
        <li><a href="#">Facebook Groups</a></li>
        </ul>
    </li>
    <li class="yahoo"><a href="#">Yahoo</a>
        <ul>
        <li><a href="#">Yahoo Games »</a>            
            <ul>
                <li><a href="#">Board Games</a></li>
                <li><a href="#">Card Games</a></li>
                <li><a href="#">Puzzle Games</a></li>
                <li><a href="#">Skill Games »</a>
                <ul>
                    <li><a href="#">Yahoo Pool</a></li>
                    <li><a href="#">Chess</a></li>
                </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Yahoo Search</a></li>
        <li><a href="#">Yahoo Answsers</a></li>
        </ul>
    </li>
    <li class="google"><a href="#">Google</a>
        <ul>
        <li><a href="#">Google mail</a></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
#nav{
    height: 39px;
    font: 12px Geneva, Arial, Helvetica, sans-serif;
    background: #3AB3A9;
    border: 1px solid #30A097;  
    border-radius: 3px;
    min-width:500px;
    margin-left: 0px;
    padding-left: 0px;
}   
#nav li{
    list-style: none;
    display: block;
    float: left;
    height: 40px;
    position: relative;
    border-right: 1px solid #52BDB5;
}
#nav li a{
    padding: 0px 10px 0px 30px;
    margin: 0px 0;
    line-height: 40px;
    text-decoration: none;
    border-right: 1px solid #389E96;
    height: 40px;
    color: #FFF;
    text-shadow: 1px 1px 1px #66696B;
}
#nav ul{
    background: #f2f5f6; 
    padding: 0px;
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-left:1px solid #DDDDDD;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $("#nav li").hover(
    function(){
        $(this).children('ul').hide();
        $(this).children('ul').slideDown('fast');
    },
    function () {
        $('ul', this).slideUp('fast');            
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multi Level Dropdown Menu CSS & jQuery"
Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"Multi Level Dropdown Menu CSS & jQuery" Bootstrap 3.3.0 Snippet by Divscodebd

Related: See More

Questions / Comments:

"Multi Level Dropdown Menu CSS & jQuery"
Bootstrap 3.3.0 Snippet by Divscodebd