JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div id="dc_jqverticalmegamenu_widget-2-item" class="dcjq-vertical-mega-menu">
<ul id="menu-bokove-menyu-1" class="menu right">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132">
<a href="http://school.259.in.ua/category/ogoloshennya/">Оголошення</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130">
<a href="http://school.259.in.ua/prioritetni-napryamki-roboti-v-shkoli/">Пріоритетні напрямки роботи в школі</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-105 current_page_item menu-item-has-children menu-item-126">
<a class="dc-mega" href="http://school.259.in.ua/naukovo-metodichna-robota-v-shkoli/">
Науково-методична робота в школі
<span class="dc-mega-icon"></span>
</a>
<div class="sub-container non-mega" style="height: 164px; margin-top: -94.7px; z-index: 1000; width: 232px; display: none; left: 198px;">
<ul class="sub-menu sub" style="">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129">
<a href="http://school.259.in.ua/naukovo-metodichna-robota-v-shkoli/prioritetni-napryamki-roboti/">Пріоритетні напрямки роботи</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-128">
<a href="http://school.259.in.ua/naukovo-metodichna-robota-v-shkoli/osnovni-zavdannya-ta-formi-metodichnoi/">Основні завдання та форми методичної роботи школи</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127">
<a href="http://school.259.in.ua/naukovo-metodichna-robota-v-shkoli/metodichni-zakhodi/">Методичні заходи</a>
</li>
</ul>
</div>
</li>

CSS

#dc_jqverticalmegamenu_widget-%ID%-item {
    font: normal 13px Arial, sans-serif;
    line-height: 16px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul ul,
#dc_jqverticalmegamenu_widget-%ID%-item ul li,
#dc_jqverticalmegamenu_widget-%ID%-item ul li .sub ul {
    margin: 0;
    padding: 0;
    border: none;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.menu.left,
#dc_jqverticalmegamenu_widget-%ID%-item ul.menu.right {
    position: relative;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #afafaf;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul li {
    float: none;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: bold;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul li a {
    float: none;
    display: block;
    border-right: 1px solid #afafaf;
    border-left: 1px solid #afafaf;
    color: #222;
    background: url(skins/images/bg_white.png) repeat-x 100% 0;
    text-shadow: 1px 1px 1px #fff;
    text-decoration: none;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li a {
    padding: 12px 10px 12px 38px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li a {
    padding: 12px 38px 12px 15px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul li a.dc-mega {
    position: relative;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul li a .dc-mega-icon {
    display: block;
    position: absolute;
    top: 18px;
    width: 6px;
    height: 8px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li a .dc-mega-icon {
    background: url(skins/images/arrow_side.png) no-repeat 0 0;
    left: 15px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.right li a .dc-mega-icon {
    background: url(skins/images/arrow_side.png) no-repeat -18px 0;
    right: 15px;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul li.mega-hover a,
#dc_jqverticalmegamenu_widget-%ID%-item ul li a:hover {
    background-position: 100% -40px;
    color: #000;
    text-shadow: none;
}
 
#dc_jqverticalmegamenu_widget-%ID%-item ul.left li.mega-hover...