JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"></div>
<ul id="menu">
	<li><a href="###">menu 1</a>
		<ul>
			<li><a href="###">menu 1-1</a></li>
			<li><a href="###">menu 1-2</a>
				<ul>
					<li><a href="###">menu 1-2-1</a></li>
					<li><a href="###">menu 1-2-2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="###">menu 2</a>
		<ul>
			<li><a href="###">menu 2-1</a></li>
			<li><a href="###">menu 2-2</a>
				<ul>
					<li><a href="###">menu 2-2-1</a></li>
					<li><a href="###">menu 2-2-2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="###">menu 3</a>
		<ul>
			<li><a href="###">menu 3-1</a></li>
			<li><a href="###">menu 3-2</a>
				<ul>
					<li><a href="###">menu 3-2-1</a></li>
					<li><a href="###">menu 3-2-2</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

CSS

#menu:after,
#menu ul:after{
    clear: both;
    content: '.';
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;	
}
#menu li{
    float: left;
    background: lightBlue;
    margin-right: 10px;
    list-style-type: none;
    font-size: 1.5em;
}
#menu li:hover{
background:yellow;
}

#menu ul{
    position: absolute;
    background: lightGreen;
    display: none;
}

JavaScript

jQuery('#menu').find('li').on({
        'mouseover' : function(e){
            //e.stopPropagation();
            var $this = jQuery(this),
                $sub_ul = $this.find('>ul'),
                $sub_li = $sub_ul.find('>li');
            $sub_ul.show();
            jQuery('#log').text('当前的li offset left 位置可能是：'+ jQuery(this).offset().left);
        },'mouseout' : function(e){
            //e.stopPropagation();
            jQuery(this).find('>ul').hide();
        }
    });