JSFiddle - React, Tailwind, and code Playground

by cgtrman

HTML

<ul id="nav" class="testnav">
		<li><a class="clk" href="#">Item 1</a></li>
		<li><a class="clk" href="#">Item 2</a></li>
		<li><a class="clk" href="#">Item 3</a>
			<ul class="sub-menu">
				<li><a href="#">Item 3-1</a>
					<ul class="sub-menu">
						<li><a href="#">Item 3-11</a></li>
						<li><a href="#">Item 3-12</a>
							<ul>
								<li><a href="#">Item 3-111</a></li>							
								<li><a href="#">Item 3-112</a>
									<ul>
										<li><a href="#">Item 3-1111</a></li>							
										<li><a href="#">Item 3-1112</a></li>							
										<li><a href="#">Item 3-1113</a>
											<ul>
												<li><a href="#">Item 3-11131</a></li>							
												<li><a href="#">Item 3-11132</a></li>							
											</ul>
										</li>							
									</ul>
								</li>
								<li><a href="#">Item 3-113</a></li>
							</ul>
						</li>
						<li><a href="#">Item 3-13</a>
						<ul>
								<li><a href="#">Item 3-111</a></li>							
								<li><a href="#">Item 3-112</a>
									<ul>
										<li><a href="#">Item 3-1111</a></li>							
										<li><a href="#">Item 3-1112</a></li>							
										<li><a href="#">Item 3-1113</a>
											<ul>
												<li><a href="#">Item 3-11131</a></li>							
												<li><a href="#">Item 3-11132</a></li>							
											</ul>
										</li>							
									</ul>
								</li>
								<li><a href="#">Item 3-113</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Item 3-2</a>
					<ul>
						<li><a href="#."> Item 3-21 </a></li>
						<li><a href="#."> Item 3-22 </a></li>
						<li><a href="#."> Item 3-23 </a></li>
					</ul>	
				</li>
				<li><a href="#">Item 3-3</a></li>
				<li><a href="#">Item 3-4</a></li>
				<li><a href="#">Item 3-5</a></li>
			</ul>
		</li>
		<li><a class="clk" href="#">Item 4</a>
			<ul class="sub-menu">
				<li><a href="#">Item 4-1</a>
					<ul class="sub-menu">
						<li><a href="#."> Item 4-11 </a></li>
						<li><a href="#."> Item 4-12...

CSS

.ui-menu {
    width: auto;
}

.ui-menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.ui-menu .ui-menu-item {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}

#nav {
    text-align: center;
    font-size: 12px;
}

#nav li {
    display: inline-block;
}

#nav li a span.ui-icon-carat-1-e {
    float:right;
    position:static;
    margin-top:2px;
    width:16px;
    height:16px;  
    background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;
}

#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}

#nav li ul {width: 120px; }

.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {
    background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
}

JavaScript

$(document).ready(function(){
	
	var menu = "#nav";
	var position = {my: "left top", at: "left bottom"};
	
	$(menu).menu({
		
		position: position,
		blur: function() {
			$(this).menu("option", "position", position);
			},
		focus: function(e, ui) {
			
			if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) {
				$(this).menu("option", "position", {my: "left top", at: "right top"});
				}
		}
	});
		
});