JSFiddle - React, Tailwind, and code Playground
HTML
<div class="float-mmenu-mini">
<ul class="spisoc">
<li class="v">Одежда
<div class="d submenu-two active">
<ul>
<li><a href="" title="" alt="">Футболки и поло</a></li>
<li><a href="" title="" alt="">Верхняя одежда</a></li>
<li><a href="" title="" alt="">Толстовки и олимпийки</a></li>
<li><a href="" title="" alt="">Рубашки</a></li>
<li><a href="" title="" alt="">Брюки</a></li>
<li><a href="" title="" alt="">Шорты</a></li>
<li><a href="" title="" alt="">Джемперы и кардиганы</a></li>
<li><a href="" title="" alt="">Джинсы</a></li>
<li><a href="" title="" alt="">Пиджаки и костюмы</a></li>
<li><a href="" title="" alt="">Спортивные костюмы</a></li>
<li><a href="" title="" alt="">Плавки и шорты для плавания</a></li>
<li><a href="" title="" alt="">Плавки и шорты для плавания</a></li>
<li><a href="" title="" alt="">Нижнее белье</a></li>
<li><a href="" title="" alt="">Носки и гетры</a></li>
<li><a href="" title="" alt="">Майки</a></li>
<li><a href="" title="" alt="">Комплекты</a></li>
<li><a href="" title="" alt="">Вся мужская одежда</a></li>
<li><a href="" title="" alt="">adidas</a></li>
<li><a href="" title="" alt="">Nike</a></li>
<li><a href="" title="" alt="">McCrain</a></li>
<li><a href="" title="" alt="">Mango Man</a></li>
<li><a href="" title="" alt="">Topman</a></li>
<li><a href="" title="" alt="">Brave Soul</a></li>
<li><a href="" title="" alt="">Burton Menswear London</a></li>
<li><a href="" title="" alt="">Puma</a></li>
...
CSS
/* FOOTER */
.footer {
min-width: 1300px;
}
.footer-one {
background: #F2F1F1;
padding: 50px 0;
min-height: 470px;
}
.footer-title h5 {
font-size: 22px;
color: #BC4A84;
font-weight: 100;
margin-bottom: 15px;
}
.etabs {
border: 1px dotted #bc4a84;
border-radius: 5px;
width: 379px;
height: 25px;
overflow: hidden;
margin-bottom: 20px;
}
.etabs li {
display: block;
float: left;
}
.etabs li a {
color: #000;outline: none;
}
.etabs li a:hover {
background:#bc4a84;
color: #fff;
}
.tab .active {
color: #fff;
background:#bc4a84;
}
.etabs li a{
padding: 1px 14.1px;
}
/* FOOTER-MMENU-BLOCK */
.spisoc li .submenu {
display: none;
}
.float-mmenu-mini .spisoc li .active {
display: block;
}
.float-mmenu-mini {
position: relative;
}
.submenu {
position: absolute;
left: 135px;
top: -1px;
height: 250px;
}
.submenu ul {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
.submenu li {
margin-right: 30px;
}
.submenu a{
color: #777;
}
.submenu a:hover,
.spisoc li:hover {
color: #000;
}
.spisoc li{
color: #000;
}
.spisoc li{
text-decoration: none;
list-style-type: none;
color: #777;
cursor: pointer;
font-size: 14px;
padding: 5px 0 0 0;
}
/*TWO*/
.spisoc li .submenu-two {
display: none;
}
.float-mmenu-mini .spisoc li .submenu-two .active {
display: block;
}
.submenu-two {
position: absolute;
left: 135px;
top: -1px;
height: 250px;
}
.submenu-two ul {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
.submenu-two li {
margin-right: 30px;
}
.submenu-two a{
color: #777;
}
.submenu-two a:hover,
.spisoc li:hover {
color: #000;
}
/*
.spisoc li{
color: #000;
}*/
/*FRI*/
.spisoc li .submenu-fri {
display: none;
}
.float-mmenu-mini .spisoc li .submenu-fri .active {
display: block;
}
.submenu-fri {
position: absolute;
left: 135px;
top: -1px;
height:...
JavaScript
$(document).ready(function(){
$('.submenu-two').each(function (i) {
if (($(this).hasClass('active')) & (i != 0 ) {
$(this).removeClass('active');
}
});
});