JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div id="menu">
 <ul>
 <li><a href="./index.php?route=product/category&amp;path=20">Компьютеры</a>

 <div>
 <ul>
 <li><a href="./index.php?route=product/category&amp;path=20_26">PC</a></li>
 <li><a href="./index.php?route=product/category&amp;path=20_27">Mac</a></li>
 </ul>
 </div>
 </li>
 <li><a href="./index.php?route=product/category&amp;path=18">Ноутбуки</a>

 <div>
 <ul>
 <li><a href="./index.php?route=product/category&amp;path=18_46">Macs</a></li>
 <li><a href="./index.php?route=product/category&amp;path=18_45">Windows</a></li> </ul>
 </div>
 </li>
 <li><a href="./index.php?route=product/category&amp;path=25">Компоненты</a>

 <div>
 <ul>
 <li><a href="./index.php?route=product/category&amp;path=25_32">Веб-
камеры</a></li>
 <li><a href="./index.php?route=product/category&amp;path=25_28">Мониторы</a></li>
 <li><a href="./index.php?route=product/category&amp;path=25_29">Мышки</a></li>
 <li><a href="./index.php?route=product/category&amp;path=25_30">Принтеры</a></li>
 <li><a href="./index.php?route=product/category&amp;path=25_31">Сканеры</a></li>
 </ul>
 </div>
 </li>
 <li><a href="./index.php?route=product/category&amp;path=57">Планшеты</a>
     </ul>
</div>

CSS

#menu,#menu li ul{ margin:0px; padding:0px; list-style:none;}
 #menu > ul > li{float:left; display:inline-block; margin-right:20px;}
 #menu li ul{display:none; position:absolute; z-index:100; width:200px; background: #fff;}
 #menu li:hover ul{display:block;}