Bootstrap Fancy Dropdowns


	<div class="container">
	<div class="row">    
        <h1 class="page-header">Fancy Bootstrap Dropdowns</h1>
        <h3>Default navbar</h3>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:;">Brand</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="javascript:;">Link</a></li>
                        <li><a href="javascript:;">Link</a></li>
                        <li class="dropdown open">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                 <li class="dropdown-plus-title">
                                    Dropdown
                                    <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                                </li>
                                <li><a href="javascript:;">Action</a></li>
                                <li><a href="javascript:;">Another action</a></li>
                                <li><a href="javascript:;">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:;">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:;">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="javascript:;">Link</a></li>
                        <li class="dropdown">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                 <li class="dropdown-plus-title">
                                    Dropdown
                                    <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                                </li>
                                <li><a href="javascript:;">Action</a></li>
                                <li><a href="javascript:;">Another action</a></li>
                                <li><a href="javascript:;">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="javascript:;">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        
        <h3>Single button dropdowns</h3>
        <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                      <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                        Action <span class="caret"></span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
            </div></div>
	</div>
    
    <h3>Split button dropdowns</h3>
    <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-default">Action</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                      <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-primary">Action</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-success">Action</button>
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-info">Action</button>
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-warning">Action</button>
                    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
                
                <div class="btn-group">
                    <button type="button" class="btn btn-danger">Action</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                     <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-plus-title">
                            Dropdown
                            <b class="pull-right glyphicon glyphicon-chevron-up"></b>
                        </li>
                        <li><a href="javascript:;">Action</a></li>
                        <li><a href="javascript:;">Another action</a></li>
                        <li><a href="javascript:;">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">Separated link</a></li>
                    </ul>
                </div>
            </div></div>
    </div>

	<script type="text/javascript">
	
	</script>

    .btn.dropdown-toggle ~ .dropdown-menu, 
ul.nav li.dropdown ul.dropdown-menu {
    background-color: rgb(244, 244, 244);
	background-color: rgb(255, 255, 255);
	border: 0 solid rgb(66, 133, 244);
	box-shadow: 0px 0px 3px rgba(25, 25, 25, 0.3);
	top: 0px;
	margin: 0px;
    padding: 0px;
}
ul.nav li.dropdown ul.dropdown-menu {
    position: absolute;
    width: 100%;
}
.dropdown-menu .dropdown-plus-title {
	width: 100%;
	color: rgb(51, 51, 51);
	padding: 6px 12px;
	font-weight: 800;
	border: 0 solid rgb(173, 173, 173);
	border-bottom-width: 2px;
	cursor: pointer;
}

ul.nav li.dropdown ul.dropdown-menu .dropdown-plus-title {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

.btn.dropdown-toggle.btn-primary ~ .dropdown-menu .dropdown-plus-title {
    border-color: rgb(53, 126, 189);
}
.btn.dropdown-toggle.btn-success ~ .dropdown-menu .dropdown-plus-title {
    border-color: rgb(76, 174, 76);
}
.btn.dropdown-toggle.btn-info ~ .dropdown-menu .dropdown-plus-title {
    border-color: rgb(70, 184, 218);
}
.btn.dropdown-toggle.btn-warning ~ .dropdown-menu .dropdown-plus-title {
    border-color: rgb(238, 162, 54);
}
.btn.dropdown-toggle.btn-danger ~ .dropdown-menu .dropdown-plus-title {
    border-color: rgb(212, 63, 58);
}

@media (min-width: 768px) {
    ul.nav li.dropdown ul.dropdown-menu .dropdown-plus-title {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
@media (min-width: 768px) {
    ul.nav li.dropdown ul.dropdown-menu {
        width: auto;
    }
}