JSFiddle - React, Tailwind, and code Playground

by isimpledesign

HTML

<ul class="nav secondary-nav">
      <li> <a href="#" class="home_btn">Home</a></li>
      <li><a href="#" class="about_btn">About</a></li>
      <li class="dropdown open"> <a href="#" class="dropdown-toggle toggle2">Leisure</a>
        <ul class="dropdown-menu down-menu2">
          <div class="selected"><img class="img_hide" src="http://www.airport-parking-directory.co.uk/images/guides/car-hire-guide.gif" width="140" height="138"/></div>
          
          <li><a href="ajax/journey.html" class="sidebarClick link">A Journey In Space</a></li>
          <li><a href="ajax/best_of_both_worlds.html" class="sidebarClick link">Best of both worlds</a></li>
          <li><a href="ajax/green_camper.html" class="sidebarClick link">A Green Camper</a></li>
           <li><a href="ajax/do_more.html" class="sidebarClick link">Do more. Much more</a></li>
          <li><a href="ajax/built_to_last.html" class="sidebarClick link">Built to last</a></li>
        </ul>
      </li>
      <li class="dropdown open"> <a href="#" class="dropdown-toggle toggle3">Lifestyle</a>
        <ul class="dropdown-menu down-menu3">
           <div class="selected"><img class="img_hide" src="http://www.airport-parking-directory.co.uk/images/guides/car-hire-guide.gif" width="140" height="138"/></div>
          <li><a href="#">Secondary link</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Another link</a></li>
        </ul>
      </li> 
      <li><a href="#" class="contact_btn">Contact</a></li>
    </ul>

CSS

.topbar div>ul, .nav {
    display:block;
    float:left;
    margin:0 10px 0 0;
    position:relative;
    left:0;
    background-color:#000;
}
.topbar div>ul>li, .nav>li {
    display:block;
    float:left;
}
.topbar div>ul a, .nav a {
    display:block;
    float:none;
    padding:10px 10px 11px;
    line-height:19px;
    text-decoration:none;
}
.topbar div>ul a:hover, .nav a:hover {
    color:#fff;
    text-decoration:none;
}
.topbar div>ul .active a, .nav .active a {
    background-color:#222;
    background-color:rgba(0, 0, 0, 0.5);
}
.topbar div>ul.secondary-nav, .nav.secondary-nav {
    float:right;
    margin-left:10px;
    margin-right:30%;
}
.topbar div>ul.secondary-nav .menu-dropdown, .nav.secondary-nav .menu-dropdown, .topbar div>ul.secondary-nav .dropdown-menu, .nav.secondary-nav .dropdown-menu {
    right:0;
}
.topbar div>ul a.menu:hover, .nav a.menu:hover, .topbar div>ul li.open .menu, .nav li.open .menu, .topbar div>ul .dropdown-toggle:hover, .nav .dropdown-toggle:hover, .topbar div>ul .dropdown.open .dropdown-toggle, .nav .dropdown.open .dropdown-toggle {
    background-color:none;
}
.topbar div>ul .menu-dropdown, .nav .menu-dropdown, .topbar div>ul .dropdown-menu, .nav .dropdown-menu {
        background-color:none;
}
.topbar div>ul .menu-dropdown a.menu, .nav .menu-dropdown a.menu, .topbar div>ul .dropdown-menu a.menu, .nav .dropdown-menu a.menu, .topbar div>ul .menu-dropdown .dropdown-toggle, .nav .menu-dropdown .dropdown-toggle, .topbar div>ul .dropdown-menu .dropdown-toggle, .nav .dropdown-menu .dropdown-toggle {
    color:#fff;
}
.topbar div>ul .menu-dropdown a.menu.open, .nav .menu-dropdown a.menu.open, .topbar div>ul .dropdown-menu a.menu.open, .nav .dropdown-menu a.menu.open, .topbar div>ul .menu-dropdown .dropdown-toggle.open, .nav .menu-dropdown .dropdown-toggle.open, .topbar div>ul .dropdown-menu .dropdown-toggle.open, .nav .dropdown-menu .dropdown-toggle.open {
    background-color:none;
}
.topbar div>ul .menu-dropdown li a, .nav...

JavaScript

$('.nav > li').hover(function () {
       
        $(this).children().find('a').slideUp("slow");
        
        $(this).addClass("hover");
        
        $(this).find('ul').css("display", "block");
        
         console.log($(this).find('a'));
         
         $(this).find('a').each(function(index) {
            $(this).slideDown("slow");
            $(this).css("text-indent", "0");
        });
        
         $(this).find('div').animate({
               'width': '178px'
         }, 'slow', function () {
             
             //console.log('done');
             $(this).next().find('img').css("display", "block");
            $('.img_hide').fadeIn();
        });


    }, function () {
        
        $(this).removeClass("hover");
        $(this).children().find('a').slideUp("slow");
        $(this).find('ul').css("display", "none");
        $(this).find('div').animate({'width': '0px'},'fast');

    });