JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="menucontainer" style="width:980px">
    <div id="edit_menu_cont">
        <ul id="submenu">
            <ul class="submenu" subcount="1">
                <li class="sub-default"><a style='background-color:#66CC66;color:#fff' href="/admin/menu_layout.php?newpage=Y&menu_layout=S&mainmenu_id=1" target="_self">+ New Sub Page</a>

                </li>
            </ul>
            <ul class="submenu" subcount="2">
                <li class="sub-default" page_id="232" pagepos="0"><a style='background-color:#66CC66' href="/admin/edit_page.php?id=232" target="_self">Testing</a>

                    <li class="sub-default" page_id="240" pagepos="0"><a style='background-color:#66CC66' href="/admin/edit_page.php?id=240" target="_self">Test2</a>

                        <li class="sub-default"><a style='background-color:#66CC66;color:#fff' href="/admin/menu_layout.php?newpage=Y&menu_layout=S&mainmenu_id=225" target="_self">+ New Sub Page</a>

                        </li>
            </ul>
            <ul class="submenu" subcount="3">
                <li class="sub-default" page_id="215" pagepos="0"><a style='background-color:#66CC66' href="/admin/edit_page.php?id=215" target="_self">Directory Categories</a>

                    <li class="sub-default" page_id="216" pagepos="0"><a style='background-color:#66CC66' href="/admin/edit_page.php?id=216" target="_self">Web Design Directory</a>

                        <li class="sub-default"><a style='background-color:#66CC66;color:#fff' href="/admin/menu_layout.php?newpage=Y&menu_layout=S&mainmenu_id=214" target="_self">+ New Sub Page</a>

                        </li>
            </ul>
            <ul class="submenu" subcount="4">
                <li class="sub-default" page_id="209" pagepos="0"><a style='background-color:#66CC66' href="/admin/edit_page.php?id=209" target="_self">Subscribe </a>

                    <li class="sub-default"><a style='background-color:#66CC66;color:#fff'...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size:11px;
}
.submenu {
    float:left;
    list-style-type: none;
    margin: 0px;
    padding: 0;
    height: auto;
    min-height:550px;
    position: relative;
    clear:none;
}
.submenu li {
    width: 90px;
    height: 30px;
    margin-left:4px;
    line-height:13px;
}
.sub-default a:link, .sub-default a:active, .sub-default a:visited, .sub-default a:hover {
    clear: none;
    float: left;
    height: 26px;
    width: 90px;
    color: #000;
    border: 1px solid #999;
    background-color: #f3f3f3;
    text-decoration:none;
    margin:1px;
}
.sub-default a:hover {
    color: #030;
    border: 1px solid #030;
}
.submenux {
    list-style-type: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 55px;
    z-index:999;
}
#submenu ul ul {
    display:none
}
#submenu li:hover > ul {
    display: block;
}
.subx-default a:link, .subx-default a:active, .subx-default a:visited, .subx-default a:hover {
    clear: none;
    float: left;
    height: 26px;
    width: 90px;
    color: #000;
    border: 1px solid #999;
    background-color: #f3f3f3;
    text-decoration:none;
    margin:1px;
}
.subx-default a:hover {
    color: #030;
    border: 1px solid #030;
}
#submenu li > a:after {
    margin-left: 5px;
    content:'\25BA';
}
#submenu > li > a:after {
    margin-left: 5px;
    content:'\25BC';
}
#submenu li > a:only-child:after {
    margin-left: 0;
    content:'';
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
}

JavaScript

$("#edit_menu_cont ul > ul > li").hover(function () {

    col=$(this).closest("ul").index() + 1
    if($(this).find("ul").length){
$("#edit_menu_cont > ul > ul:eq("+col+")").css("opacity", ".1")
    }
    else{
        $("#edit_menu_cont ul > ul").css("opacity", "1")
    }
})
$("#edit_menu_cont ul > ul").mouseleave(function () {
    $("#edit_menu_cont ul > ul").css("opacity", "1")
})