JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>text</p>
<p>text</p>



<div class="sub">
<ul>
	<li class="dropdown"><a href="">Menu item 1</a>
		<ul class="dropdown-content">
			<li class="dropdown"><a href="">Apple</a>
				<ul class="dropdown-content">
<li class="dropdown"><a href="">Granny</a></li>
<li><a href="">Golden</a></li>
<li><a href="">Cox</a></li>
				</ul>
			</li>
			<li>
				<a href="">Banana</a>
			</li>
			<li>
				<a href="">Pear</a>
			</li>
			<li>
				<a href="">Orange</a>
			</li>
		</ul>
	</li>
  <li><a href="">Menu item 2</a></li>
  <li class="dropdown"><a href="">Menu item 3</a>
  <ul class="dropdown-content">
    <li><a href="">Menu item that is realy really long</a></li>
  <li><a href="">Menu item 32</a></li>
  <li><a href="">Menu item 32</a></li>
  <li><a href="">Menu item 32</a></li>
	<li class="dropdown"><a href="">Menu item 31</a>
		<ul class="dropdown-content">
			<li class="dropdown"><a href="">Menu item 311</a>

			</li>
			<li><a href="">Menu item 312</a></li>
			<li><a href="">Menu item 313</a></li>
			<li><a href="">Menu item 314</a></li>
		</ul>
	</li>
	<li><a href="">Menu item 32</a></li>


  </ul>
  </li>
  <li><a href="">Menu item 4</a></li>
</ul>
</div>

CSS

.sub {position:fixed;}
.sub ul {list-style-type: none; margin:0; padding:0; width: 300px; height:100%;background-color: #f1f1f1; }
.sub ul li {min-width: 200px; font-size:14px;}
.sub ul li a {display: block; color: #000; text-decoration: none; padding: 16px 0 16px 16px;}
.sub ul li:hover > a {color: white; background-color: #555;}



.dropdown-content {
	min-width: 150px;
    display: none;
	left: 100%;
    float:left;
    position: absolute;
	font-size:14px;

  top:0;
}
.dropdown-content a {
    background-color: #fbfbfb;
    color: black;
    text-decoration: none;
    display: block;
    text-align: left;
	padding: 16px 0 16px 16px;
}
.dropdown:hover > .dropdown-content {
    display: block;height:100%;
}