JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <li><a href="">us</a></li>
        <li><a href="">solutions</a></li>
        <li><a href="">portfolio</a>
            <ul>
                <div>
                    <li><a href="">customer logo</a></li>
                    <li><a href="">site screenshot</a></li>
                    <li><a href="">testimonials</a></li>
                </div>
            </ul>
        </li>
        <li><a href="">knowledge base</a></li>
    </ul>
</div>

CSS

.menu {
    float: left;
    width: 456px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    background: #dfdfdf; /* Old browsers */
    background: -moz-linear-gradient(top, #dfdfdf 0%, #d7d7d7 50%, #d0d0d0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfdfdf), color-stop(50%, #d7d7d7), color-stop(100%, #d0d0d0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dfdfdf 0%, #d7d7d7 50%, #d0d0d0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dfdfdf 0%, #d7d7d7 50%, #d0d0d0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dfdfdf 0%, #d7d7d7 50%, #d0d0d0 100%); /* IE10+ */
    background: linear-gradient(top, #dfdfdf 0%, #d7d7d7 50%, #d0d0d0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#dfdfdf', endColorstr = '#d0d0d0', GradientType = 0); /* IE6-9 */
    margin: 31px 0 0 108px;
    behavior: url(PIE.htc);
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline;
}

.menu ul li a {
    font-size: 1.2em;
    color: #20272f;
    text-decoration: none;
    font-family: "HelveticaR";
    display: inline-block;
    text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #6a7c98;
    filter: dropshadow(color = #ffffff, offx = 0, offy = 1);
    text-align: center;
    padding: 5px 16px 8px;
    behavior: url(PIE.htc);
}

.menu ul li ul {
    display: none;
    position: absolute;
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 151px;
    /*margin: 12px 0 0 0;*/
}

.menu ul li a:hover {
    background: #d0d0d0; /* Old browsers */
    background: -moz-linear-gradient(top, #d0d0d0 0%, #d9d9d9 50%, #dfdfdf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0d0d0), color-stop(50%, #d9d9d9), color-stop(100%, #dfdfdf)); /* Chrome,Safari4+ */
   ...

JavaScript

var qaq= $(".menu ul li ul").height();
    $(".menu ul li ul").css({height: 0, paddingTop: 0});
    $(".menu ul li").hover(
        function () {
            //$(this).children("ul").css("display", "block");
            $(this).children("ul").stop().animate({
                height: qaq + "px",
                paddingTop: 20
            }, 500);
        },
        function () {
            $(this).children("ul").stop().animate({
                height: 0,
                paddingTop:0
            }, 500);
        }
    );