JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<ul id="menu">
    <li><a href="#">Topics</a>
        <ul class="drop">
            <li class="more"><a href="#">Network</a>
                <ul>
                    <li class="topborderdelete"><a href="#">NetOps Liaison</a></li>
                    <li><a href="#">Information Assurance</a></li>
                    <li><a href="#">Systems Engineering Mgmt.</a></li>
                    <li><a href="#">BLII</a></li>
                    <li><a href="#">Tech Refresh Plan</a></li>
                    <li class="more"><a href="#">IT Service Mgmt.</a>
                        <ul>
                            <li><a href="#">Data Mgmt.</a></li>
                            <li><a href="#">Demand Mgmt.</a></li>
                            <li><a href="#">Availability &amp; Capacity</a></li>
                            <li class="borderleft"><a href="#">Change Mgmt.</a></li>
                            <li class="borderleft"><a href="#">Requirements Mgmt.</a></li>
                            <li class="borderleft"><a href="#">Facilities Mgmt.</a></li>
                            <li class="borderleft"><a href="#">Release and Deploy Mgmt.</a></li>
                            <li class="borderleft"><a href="#">WAN Capacity</a></li>
                            <li class="borderleft"><a href="#">Asset Mgmt.</a></li>
                            <li class="borderleft"><a href="#">Configuration Mgmt.</a></li>
                            <li class="borderleft"><a href="#">Continual Service Improvement</a></li>
                            <li class="borderleft"><a href="#">IT Portfolio Management</a></li>
                            <li class="borderleft"><a href="#">Performance Management</a></li>
                            <li class="borderleft"><a href="#">Service Level Management</a></li>
                        </ul>
                    </li>
                    <li class="more"><a href="#">Strategy Modernization &amp; Design</a>
                        <ul>
                   ...

CSS

ul#menu {
    margin: 0;
    padding: 0;
    min-width: 764px;
    /* margin-top: -46px; */
}
ul#menu > li {
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
ul#menu a {
    text-decoration: none;
    background-color: #E2EBFC;
    display: block;
    padding: 9px;
    color: #3966bf;
}
ul#menu a:hover {
    color: white;
    background: #3E628F;
}
ul#menu > li ul.drop {
    margin:0;
    padding:0;
    width:180px;
    position:absolute;
    display:none;
    z-index: 10;
}
ul#menu > li ul.drop ul {
    margin: 0;
    padding: 0;
    width: 180px;
    position: absolute;
    display: none;
    left: 180px;
    top: 0;
    border-right: 1px solid rgb(117, 160, 240);
    border-bottom: 1px solid rgb(117, 160, 240);
    border-top: 1px solid rgb(117, 160, 240);
}
ul.drop {
    border-left: 1px solid rgb(117, 160, 240);
    border-right: 1px solid rgb(117, 160, 240);
    border-bottom: 1px solid rgb(117, 160, 240);
}
ul#menu > li ul li {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}
li.more > a:after {
    content:'>';
    position: absolute;
    right: 0px;
    padding-right: 8px;
    padding-top: 2px;
    font-size: 8px;
}
.menu-horizontal {
    display: none;
}
.s4-search .ms-sbtable-ex {
    display: none;
}
body #s4-topheader2 {
    background: url(selbg-B4D96211.png?ctag) repeat-x left top;
    background-color: #E2EBFC;
    vertical-align: middle;
    min-height: 25px;
    border-top: 1px solid #B6CDF7;
    border-bottom: 1px solid #75A0F0;
    height: 32px;
}
span.s4-help {
    display: none;
}
li.borderleft {
  border-left: 1px solid rgb(117, 160, 240);
}
li.moveleft1 {
    margin-left: -1px !important;
}
li.topborderdelete {
  border-top: 1px solid rgb(226, 235, 252);
  margin-top: -1px !important;
}

JavaScript

$(function () {
    $('ul#menu li').hover(function () {
        //$('#drop' , this).css('display','block');
        $(this).children('ul').delay(50).slideDown(150);
    }, function () {
        $(this).children('ul').delay(50).slideUp(20);
    });
});