JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div class="main-wrapper">
    <div class="menu-wrapper">
        <nav class="nav-wrapper">
            <ul class="nav">
                <li><a href="#">Menu One</a>

                    <div class="dropdown">
                        <ul>
                            <li><a href="#">Sub menu one</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu two</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu two</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu three</a>

                                <div class="dd-panel">
                                    <img class="media" src="http://lorempixel.com/200/160/business/" alt="image" />
                                    <p class="media-caption"><strong>Menu one - sub menu three</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                                </div>
                            </li>
                            <li><a href="#">Sub menu four</a>

                                <div class="dd-panel">
                 ...

CSS

body {
    font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
    font-size:13px;
}
a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}
.nav {
    width:940px;
    margin:0 auto;
    margin-left:230px;
    height:20px;
}
.nav li {
    list-style:none;
    position:relative;
}
.nav > li {
    display:inline-block;
    font-size:13px;
    color:#687074;
    /* min-width:160px;*/
}
.nav > li > a {
    padding:5px 10px 10px 10px;
    color:#687074;
    display:block;
    text-align:center;
}
.nav li:hover > a {
    color:#687074;
}
.nav > li > a:hover {
    padding:5px 10px 10px 10px;
    color:#444!important;
    display:block;
    text-align:center;
    border-left:0px solid #444;
    border-right:0px solid #444;
    border-top:0px solid #444;
}
.nav li:hover {
    /*background:#028F41;*/
}
.nav ul li a:hover .media-caption {
    display:block;
}
.nav li:hover .dropdown {
    display:block;
}
.dropdown {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    color:#fff;
    /* min-width:160px;*/
    background-image:url("http://images.wikia.com/merlin1/images/4/4e/Transparent_background.png");
    /*  background:#028F41;*/
    border-left:0px solid #008438;
    border-right:0px solid #008438;
    border-bottom:0px solid #008438;
    border-top:0px solid #008438;
}
.dropdown.has-panel {
    width:600px;
}
.dropdown > ul {
    width:160px;
    margin:10px 0;
}
.dropdown > ul > li {
    position:static;
    font-size:12px;
}
.dropdown > ul > li > a {
    font-weight:normal;
    text-transform:none;
}
.dropdown-last {
    left:auto;
    right:0;
}
.dropdown-last > ul {
    float:right;
}
.dropdown li > a {
    color:#fff;
    padding:3px 5px;
    display:block;
}
.dropdown li > a:hover {
    background:#008438;
}
.dropdown li {
    color:#fff;
    border-bottom:1px solid #008438;
    display:block;
}
.dropdown li:last-child {
    color:#fff;
    border-bottom:0px solid #fff;
    display:block;
}
.dd-panel {
    position:absolute;
 ...

JavaScript

$(document).ready(function () {
  
    $(".nav>li").on("mouseenter", function () {
        if($(this).find('.dd-panel').length>0)
        {
       $(this).find('.dropdown').addClass("has-panel");
        }
        $(this).find(".media-caption:first").css("display", "block");

    });

    $(".nav>li").find(".dropdown li:not(li:first)").on("mouseenter", function () {

        $(this).parents('.nav>li').find('.media-caption:first').css("display", "none");
    });


});