JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu"><ul><li class="page_item page-item-2"><a title="Membership" href="http://localhost:7065/index.php/membership/">Membership</a><ul class="children"><li class="page_item page-item-108"><a title="Test 1" href="http://localhost:7065/index.php/membership/test-1/">Test 1</a><ul class="children"><li class="page_item page-item-133"><a title="Test 4" href="http://localhost:7065/index.php/membership/test-1/test-4/">Test 4</a></li><li class="login"><a href="../../../index.php/login/#TB_inline?height=200&amp;width=200&amp;inlineId=form" class="thickbox">Log In</a></li></ul></li><li class="page_item page-item-110"><a title="Test 2" href="http://localhost:7065/index.php/membership/test-2/">Test 2</a><ul class="children"><li class="page_item page-item-112"><a title="Test 3" href="http://localhost:7065/index.php/membership/test-2/test-3/">Test 3</a></li><li class="login"><a href="../../../index.php/login/#TB_inline?height=200&amp;width=200&amp;inlineId=form" class="thickbox">Log In</a></li></ul></li><li class="login"><a href="../../../index.php/login/#TB_inline?height=200&amp;width=200&amp;inlineId=form" class="thickbox">Log In</a></li></ul></li></ul></div>

CSS

body {
    margin: auto;
    min-width: 1024px;
    padding: 0;
    width: auto;
}
a {
    color: inherit;
    text-decoration: inherit;
}
h2, h3, h4, h5, h6, h7, h8 {
    margin-bottom: 5px !important;
}
h1 {
    margin-bottom: 10px !important;
}
.content strong {
    font-weight: bold;
}
h3 span.left {
    float: right;
    font-size: 80%;
    line-height: 20px;
    text-align: right;
}
.menu ul li a:hover {
    text-decoration: underline !important;
}
.topContent .top-block-1 h2, .topContent .top-block-2 h2, .topContent .top-block-3 h2 {
    font-size: 200%;
}
HTML * {
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}
body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 83%;
}
a, img, fieldset {
    border: 0 none;
}
table {
    border-collapse: collapse;
}
h6 {
    font-size: 50%;
    font-weight: bold;
}
h5 {
    font-size: 75%;
    font-weight: bold;
}
h4 {
    font-size: 100%;
    font-weight: bold;
}
h3 {
    font-size: 125%;
    font-weight: bold;
}
h2 {
    font-size: 150%;
    font-weight: bold;
}
h1 {
    font-size: 175%;
    font-weight: bold;
}
.menu ul li {
    float: left;
    margin-left: 26px;
}
.menu ul, .menu ol, .menu li {
    list-style: none outside none;
}
.menu ul {
    position: relative;
}
.page_item {
    position: relative;
}
.page_item .children {
    display: none;
    padding-top: 5px;
}
.page_item .children .page_item {
    background-color: pink;
    float: none;
}
.page_item:hover .children {
    display: block;
    left: 5px;
    position: absolute;
    top: 100%;
    width: 200px;
}
.page_item:hover .children .children {
    margin-top: 0;
    padding-top: 0;
    position: relative;
    top: auto;
}
.page_item .children .login {
    background-color: #E8E6E2;
    bottom: 100%;
    display: none;
    float: none;
    left: 0;
    position: absolute;
}
* p {
    margin-bottom:...

JavaScript

(function($){
    $(document).ready(function(){
        $("div > ul > li.page_item").hover(function(){ 
            $("div.top").stop().animate({
                height:$(this).children('ul').eq(0).height() + 130
            }, 500); 
            alert($(this).children('ul').eq(0).height());
        }, function(){
                $("div.top").stop().animate({
                height:130
                }, 500);
        });
    });
})(jQuery);