JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<ul>
	  <li>item 1</li>
		
<ul>
	  <li>cool 1</li>
	  <li>cool 2</li>
	  <li>cool 3</li>
	  <li>cool 4</li>
	  <li>cool 5</li>
	  <li>cool 6</li>
</ul>	
		
	  <li>item 2</li>
	
<ul>
	  <li>item 1</li>
	  <li>item 2</li>
	  <li>item 3</li>
	  <li>item 4</li>
	  <li>item 5</li>
	  <li>item 6</li>
</ul>
	
	  <li>item 3</li>
	  <li>item 4</li>
	  <li>item 5</li>
	  <li>item 6</li>
</ul>

CSS

ul {margin:0;padding:0;position:relative;}

ul ul {display:block;position:absolute;top:20px;display:none;background-color:#eee;height:30px;line-height:30px;}

ul li {float:left;list-style-type:none;background-color:#eee;height:30px;line-height:30px;}

ul li:hover + ul {display:block;}

ul ul:hover {display:block;}