JSFiddle - React, Tailwind, and code Playground

by subash dharel

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav navbar-main">
      <li><a href="#">Timeclock</a> </li>
      <li><a href="#">Schedule</a></li>
      <li class="dropdown active">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee</a>
        <ul class="dropdown-menu">
          <li><a href="#">Employee SCHEDULE</a></li>
          <li><a href="#">MY Employee SCHEDULE</a></li>
          <li><a href="#">AVAILABILITY</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reporting</a>
        <ul class="dropdown-menu">
          <li><a href="#">Reporting One</a></li>
          <li><a href="#">Reporting Two</a></li>
          <li><a href="#">Reporting Three</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Setting</a>
        <ul class="dropdown-menu">
          <li><a href="#">Setting One</a></li>
          <li><a href="#">Setting Two</a></li>
          <li><a href="#">Setting Three</a></li>
        </ul>
      </li>
    </ul>


<br>
    <br>
        <br>
            <br>
                <br>
    <br>
        <br>
            <br>
                Should work like <br> 
                <iframe width="640" height="480" src="//www.youtube.com/embed/lVZq_hg1Z08?rel=0" frameborder="0" allowfullscreen></iframe>

CSS

.navbar-main>li	 				        { position: static;}
.navbar-main>li ul						{ position: absolute;  top:50px;left: 0; right: 0; overflow: hidden; padding: 0;}
.navbar-main>li ul li 					{ float: left; list-style: none; }

JavaScript

$(function(){
    $(".dropdown.active").toggleClass("open",true);
});

$(function(){
    $(".dropdown.active").on("hide.bs.dropdown",function(e) {
        e.preventDefault(); 
        return false;
    });
});