JSFiddle - React, Tailwind, and code Playground

by mridulpv

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-top:106px;">
      <div class="container">
      	<div class="row">
          <nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
								 <span class="sr-only">Toggle navigation</span>
								 <span class="icon-bar"></span>
								 <span class="icon-bar"></span>
								 <span class="icon-bar"></span>
							</button>
						</div>

						<div class="collapse navbar-collapse dropdown navbar-ex1-collapse">
							<ul class="nav navbar-nav category-nav">
		      		  <li><a href="#" data-toggle="dropdown" style="border-right&#58;#fff 1px solid;color:white;">Electronics</a>
		      		  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
									<li><a href="#">subcategory1</a>
										<ul>
												<li><a href="#" style="color:black">sub_subcategory1</a></li>	
												<li><a href="#" style="color:black">sub_subcategory2 ....</a></li>										
										</ul>
									</li>
									<li><a href="#" >subcategory2</a>
										<ul>
												<li><a href="#" style="color:black">sub_subcategory</a></li>									
										</ul>
									</li>
									<li><a href="#">subcategory3</a>
										<ul>
												<li><a href="#" style="color:black">sub_subcategory</a></li>									
										</ul>
									</li>
									<li><a href="#">subcategory4</a>
										<ul>
												<li><a href="#" style="color:black">sub_subcategory1</a></li>	
												<li><a href="#" style="color:black">sub_subcategory2 ....</a></li>										
										</ul>
									</li>
									<li><a href="#" >subcategory5</a>
										<ul>
												<li><a href="#"...

JavaScript

$( document ).ready(function() {
    							$('.navbar-nav>li>.dropdown-menu').css("width","500px");
    							$('.navbar-nav>li>.dropdown-menu').css("max-height","300px");
}