JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<ul id="menu" class="menuPrincipal">
    <li>
        <a href="#">AAAAAAA 111111</a>
        <ul id="menu">
            <li><a href="#">AAAAAAA 111111</a></li>
            <li><a href="#">BBBBBBB 222222</a></li>
            <li><a href="#">CCCCCCC 333333</a></li>
        </ul>
    </li>
    <li><a href="#">BBBBBBB 222222</a></li>
    <li><a href="#">CCCCCCC 333333</a></li>
</ul>
<select name="annoyingCombo" id="annoyingCombo">
    <option>ABCDEFGH 1</option>
    <option>ABCDEFGH 2</option>
    <option>ABCDEFGH 3</option>
    <option>ABCDEFGH 4</option>
    <option>ABCDEFGH 5</option>
    <option>ABCDEFGH 6</option>
</select>

CSS

/*** ESSENTIAL STYLES ***/
.menuPrincipal, .menuPrincipal * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.menuPrincipal {
    /*line-height:    1.0;*/
}
.menuPrincipal ul {
    position:        absolute;
    width:            10em; /* left offset of submenus need to match (see below) */
}
.menuPrincipal ul li {
    width:            100%;
}
.menuPrincipal li {
    float:            left;
    position:        relative;
}
.menuPrincipal a {
    display:        block;
    position:        relative;
}
#MenuPrincipal
{
    height:27px !important;
    background-color:#99BED0;
}

ul.menuPrincipal /*all menu.*/
{
    padding-bottom:1px;
    padding-top:0px;
    width:659px;
}
ul.menuPrincipal li /*all menu.*/
{
    z-index:99;
    margin-bottom:4px;
}
ul.menuPrincipal li.header /*styles for 1st level link. "header" of menu.*/
{
    height:25px;
    background-color:transparent;
    -moz-user-select: none;
    padding:1px 2px;
    border-color:#293A62 #5392B0 #293A62 #293A62;
    border-right:1px solid #5392B0;
    border-width:1px;
}
ul.menuPrincipal li.header:hover,
ul.menuPrincipal li.header.selected
{
    background-color:#D8E7ED;
}
ul.menuPrincipal li a /*styles for th anchor in the 1st level link. "header" of menu.*/
{
    position:relative;
    font-size: 7pt;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-family: verdana,arial;
    text-decoration: none;
    color:#293A62;
    cursor:pointer;
}
.menuPrincipal li ul
{
    display: none;
    text-align:left;
    background-color:#F5F5F5 !important;
    margin-top:4px;
    border:1px #293A62 solid;
    padding:1px;
    z-index:99;
}
.menuPrincipal li ul li
{
    cursor:hand;
    height:18px;
    background-color:#F5F5F5;
    -moz-user-select: none;
    padding:0px;
    border-right:none !important;
    margin-bottom:3px;
}
.menuPrincipal li ul li.ultimoElemento
{
    margin-bottom:0px !important;
}
.menuPrincipal li ul li:hover,
.menuPrincipal...

JavaScript

(function ($) {

    //Agrego otras funciones que voy a utilizar.
    $.fn.completeHeight = function (borders) {
        var _this = $(this),
        paddingTop = 0,
        paddingBottom = 0,
        h = _this.height(),
        cssHeight = parseInt(_this.css('height')),
        borderTop = 0,
        borderBottom = 0;

        if (!isNaN(parseInt(_this.css('paddingTop'))))
            paddingTop = parseInt(_this.css('paddingTop'));

        if (!isNaN(parseInt(_this.css('paddingBottom'))))
            paddingBottom = parseInt(_this.css('paddingBottom'));

        if (h == 0 && !isNaN(cssHeight) && cssHeight != 0)
            h = cssHeight;

        if (borders) {
            if (!isNaN(parseInt(_this.css('borderTopWidth'))))
                borderTop = parseInt(_this.css('borderTopWidth'));
            if (!isNaN(parseInt(_this.css('borderBottomWidth'))))
                borderBottom = parseInt(_this.css('borderBottomWidth'));
        }

        return h + paddingTop + paddingBottom + borderTop + borderBottom;
    };

    $.fn.completeWidth = function (borders) {
        var _this = $(this),
        paddingLeft = 0,
        paddingRight = 0,
        w = _this.width(),
        cssWidth = parseInt(_this.css('width')),
        borderLeft = 0,
        borderRight = 0;

        if (!isNaN(parseInt(_this.css('paddingLeft'))))
            paddingLeft = parseInt(_this.css('paddingLeft'));

        if (!isNaN(parseInt(_this.css('paddingRight'))))
            paddingRight = parseInt(_this.css('paddingRight'));

        if (w == 0 && !isNaN(cssWidth) && cssWidth != 0)
            w = cssWidth;

        if (borders) {
            if (!isNaN(parseInt(_this.css('borderLeftWidth'))))
                borderLeft = parseInt(_this.css('borderLeftWidth'));
            if (!isNaN(parseInt(_this.css('borderRightWidth'))))
                borderRight = parseInt(_this.css('borderRightWidth'));
        }

        return w + paddingLeft + paddingRight + borderLeft + borderRight;
    };

...