Submenu in bootstrap 3


#1

How to create a submenu in Bootstrap 3.I tried.But,the code runs nothing.Can anyone help?


#2

Could you paste in the code then we can help you

http://discuss.codecademy.com/t/using-backticks-to-format-your-code/3697/11


#3

My code is as follows:

 <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- 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="index.html">DAZZ EXPORTS</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 navbar-right">
				   <li class="active">
                        <a href="index.html">Home</a>
                    </li>                   
				   <li>
                        <a href="about.html">About</a>
                    </li>
					<li class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle" >Products<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                           	<li><a href="products1.html" >1 Products</a></li>
                            <li class="dropdown dropdown-submenu"><a href="#" data-toggle="dropdown" class="dropdown-toggle" >2 Products</a>
								<ul class="dropdown-menu">
									<li><a href="subproducts1.html">Sub Products1</a></li>
									<li><a href="subproducts2.html">Sub Products2</a></li>
									<li><a href="subproducts1.html">Sub Products3</a></li>
								</ul>
							</li>
                            <li><a href="products3.html">3 Products</a></li>
                            <li><a href="products4.html">4 Products</a></li>
                            <li><a href="products5.html">5 Products</a></li>
                        </ul>
                    </li>

The css code is:

.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 6px 6px 6px;-moz-border-radius:6px 6px 6px 6px;border-radius:6px 6px 6px 6px;}


The js code is:

(function($){
	$(document).ready(function(){
		$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('open');
			$(this).parent().toggleClass('open');
		});
	});
})(jQuery);

This is not worked.But I am using the similar css and js code for another html example.That was working.I don't know that what's the reason is behind that.Can anyone help me??????


#4

#5