JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul>
		<li>Item</li>
		<li data-arrow="▼">
			Item
			<ul>
				<li>SubItem</li>
				<li data-arrow="►">
					SubItem
					<ul>
						<li>SubSubItem</li>
						<li>SubSubItem</li>
						<li>SubSubItem</li>
						<li>SubSubItem</li>
					</ul>
				</li>
				<li>SubItem</li>
				<li>SubItem</li>
			</ul>
		</li>
		<li>Item</li>
		<li>Item</li>
	</ul>
</nav>

CSS

[data-arrow]:after {content:attr(data-arrow);position:absolute;top:0;right:5px;font-size:70%;}
ul {margin:0;padding:0;list-style:none;text-align:center;background:#eee;}

li {position:relative;font:110%/40px sans-serif;cursor:pointer;color:#000;}
li:hover {color:#fff;background:#09f;}

nav>ul {min-width: 700px;}
nav>ul>li {display:inline-block;vertical-align:top;padding:0 60px;background:#e5e5e5;}
nav>ul>li:hover>ul {top:100%;}
ul ul {position:absolute;top:-9999px;}
nav>ul>li>ul {width:100%;left:0;}
ul ul ul {left:100%;}
li li li {padding:0 40px;font-size:100%;}
li li:hover ul {top:0;}