Simple example of twitter Bootstrap Multilevel Dropdown Menu here is the working example jsfiddle and below is the complete source of html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap Multilevel Dropdown Menu</title>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css"
href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script>
/* bootstrap-dropdown.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!function( $ ){
"use strict"
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, Dropdown = function ( element ) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function ( e ) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent
, isActive
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open')
clearMenus()
!isActive && $parent.toggleClass('open')
return false
}
}
function clearMenus() {
$(toggle).parent().removeClass('open')
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}( window.jQuery );
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery('.submenu').hover(function () {
jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");
});//]]>
</script>
<style>
.submenu-show
{
border-radius: 3px;
display: block;
left: 100%;
margin-top: -25px !important;
moz-border-radius: 3px;
position: absolute;
webkit-border-radius: 3px;
}
.submenu-hide
{
display: none !important;
float: right;
position: relative;
top: auto;
}
.navbar .submenu-show:before
{
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .submenu-show:after
{
border-bottom: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-top: 6px solid transparent;
left: 10px;
left: -6px;
top: 11px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Go To <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="#">Level 1.1.1</a></li>
<li><a href="#">Level 1.1.2</a></li>
<li><a href="#">Level 1.1.3</a></li>
<li><a href="#">Level 1.1.4</a></li>
</ul>
</li>
<li class="dropdown submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
<ul class="dropdown-menu submenu-show submenu-hide">
<li><a href="#">Level 1.2.1</a></li>
<li><a href="#">Level 1.2.2</a></li>
</ul>
</li>
<li><a href="#">Level 1.3</a></li>
<li><a href="#">Level 1.4</a></li>
<li><a href="#">Level 1.5</a></li>
</ul>
</li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
