JSFiddle - React, Tailwind, and code Playground

by Alexander Antonov

HTML

<ul class="menu">
<li class="item-101"><a href="/" >ГЛАВНАЯ</a></li><li class="item-107"><a href="/o-kompanii" >О КОМПАНИИ</a></li><li class="item-108 active deeper parent"><a href="/katalog" >КАТАЛОГ &bull;</a><ul><li class="item-116"><a href="/katalog/avtovozy" >Автовозы</a></li><li class="item-118 current active"><a href="/katalog/traly-tyazhelovozy" >Тралы тяжеловозы</a></li><li class="item-129"><a href="/katalog/panelevozy" >Панелевозы</a></li><li class="item-119"><a href="/katalog/polupritsepy-ploshchadki-platformy" >Полуприцепы площадки, платформы</a></li><li class="item-120"><a href="/katalog/pritsepy-rospuski" >Прицепы роспуски</a></li><li class="item-121"><a href="/katalog/razdvizhnye-pritsepy-i-polupritsepy" >Раздвижные прицепы и полуприцепы</a></li><li class="item-122"><a href="/katalog/samosvalnye-pritsepy-polupritsepy-furgony" >Самосвальные прицепы, полуприцепы, фургоны</a></li><li class="item-197"><a href="/katalog/tekhnika-dlya-podsobnogo-khozyajstva" >Техника для подсобного хозяйства</a></li></ul></li><li class="item-109 deeper parent"><a href="/komplektatsiya-i-servis" >КОМПЛЕКТАЦИЯ И СЕРВИС &bull;</a><ul><li class="item-187"><a href="/komplektatsiya-i-servis/remont" >Ремонт &emsp;&emsp;&emsp;&emsp;</a></li><li class="item-194"><a href="/komplektatsiya-i-servis/dopolnitelnye-optsii" >Дополнительные опции</a></li></ul></li><li class="item-209"><a href="/zapchasti" >ЗАПЧАСТИ</a></li><li class="item-110"><a href="/tekhnika-b-u" >ТЕХНИКА Б/У</a></li><li class="item-111"><a href="/tekhnologiya-proizvodstva" >ТЕХНОЛОГИЯ ПРОИЗВОДСТВА</a></li><li class="item-112"><a href="/fotogalereya" >ФОТОГАЛЕРЕЯ</a></li><li class="item-113"><a href="/lizing" >ЛИЗИНГ</a></li><li class="item-114"><a href="/kontakty" >КОНТАКТЫ</a></li><li class="item-115"><a href="/vopros" >ВОПРОС-ОТВЕТ</a></li></ul>

CSS

.menu {position: relative; top: 0; margin: 0; padding: 0; width: 1350px;}
.menu ul, .menu li {list-style: none; margin: 0; padding: 0; font-size: 10pt; font-family: Arial,sans-serif; font-style: italic;}
.menu li {float:left;display: block;}
.menu li a {display: block; padding: 5px 10px; color: #fff; background-color: #ff0000;text-decoration: none;}
.menu li a:hover {color: #d2d2d2; background-color: #db0202;text-decoration: none; box-shadow: inset 0 0 3px rgba(0,0,0,0.9)}
.menu li:hover ul {display: block; z-index:999999}
.menu li ul {position: absolute; display: none;}
.menu li ul li {float:none}


ul.menu li:first-child a{border-radius: 20px 0 0 20px}
ul.menu li li:first-child a{border-radius: 0;border:0}
ul.menu li:last-child a{border-radius: 0 20px 20px 0;}
ul.menu li li:last-child a{border-radius: 0;border:0}