JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div class="menu">
    <ul>
        <li class="page_item page-item-2">
            Membership
            <ul class="children">
                <li class="page_item page-item-108">
                    Test 1
                    <ul class="children">
                        <li class="page_item page-item-133">
                            Test 4
                        </li>
                        <li class="login">
                            Log In
                        </li>
                    </ul>
                </li>
                <li class="page_item page-item-110">
                    Test 2
                    <ul class="children">
                        <li class="page_item page-item-112">
                            Test 3
                        </li>
                        <li class="login">
                            Log In
                        </li>
                    </ul>
                </li>
                <li class="login">
                    Log In
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.children { display: none; }
.page_item:hover .children { display: block; }

div, ul, li { line-height: 15px; }

JavaScript

$("div > ul > li.page_item").mouseover(function(){ 

    var height = $(this).children('ul').eq(0).height()
    console.log('height: ', height);

});