JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<ul class="b-nav b-nav_level1">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij" class="b-nav__link">Для знаний</a>
                            <i class="b-nav__ar"></i>                        </div>

						<ul class="b-nav b-nav_sub-level2" style="display: block;">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory" class="b-nav__link">Конструкторы</a>
                        </div>

								<ul class="b-nav b-nav_sub-level3">


					<li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/predmetnye" class="b-nav__link">Предметные</a>
                        </div>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/elektronnye" class="b-nav__link">Электронные</a>
                        </div>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item b-nav__wrap-item_active">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/konstruktory/elementnye" class="b-nav__link">Элементные</a>
                        </div>

									</li>
								</ul>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-znanij/tablicy" class="b-nav__link">Таблицы</a>
                        </div>

							</li>
						</ul>


					</li><li class="b-nav__item">
						<div class="b-nav__wrap-item">
                            <a href="katalog-tovarov/internet-magazin/dlja-progulok" class="b-nav__link">Для прогулок</a>
                                      ...

CSS

.b-nav {
	list-style:none;
	padding:0;
	border-radius: 10px;
}
.b-nav__item {
	margin:0;
	padding:0;
	width:220px;
}
.b-nav__wrap-item {
	background:#dddddd;
  /*border-bottom: 1px solid white;*/
	padding:5px 25px 6px 11px;
}
/*.b-nav_level1 > :first-child > .b-nav__wrap-item {
	border-radius:10px 10px 0 0;
}*/
.bdrs-bottom {
	border-radius:0 0 10px 10px;
}

.b-nav__wrap-item_active,
.b-nav__wrap-item:hover {
	background:#3378b4;
}
.b-nav__wrap-item_active .b-nav__link,
.b-nav__wrap-item:hover .b-nav__link {
	color:#fff;
	text-decoration:underline;
}
.b-nav__link {
	color:#3e4b52;
	font:12px/16px Tahoma,sans-serif;
	text-decoration:none;
}
.b-nav__ar {
	background:red 2px 2px no-repeat;
	cursor:pointer;
	height:11px;
	position:absolute;
	width:15px;
}
.b-nav_sub-level2 {
	display: none;
	margin-bottom:0px;
}
.b-nav_sub-level3 {
	margin-bottom:0px;
	margin-left:10px;
}
.b-nav_sub-level2 .b-nav__wrap-item {
	background:#d6e4f0;
	padding-left:20px;
	width:175px;
}
.b-nav_sub-level3 .b-nav__wrap-item {
	padding-left:20px;
	width:165px;
}
.b-nav_sub-level2 .b-nav__wrap-item_active,
.b-nav_sub-level2 .b-nav__wrap-item:hover {
	background:#99bbd9;
}
.b-nav_sub-level2 .b-nav__wrap-item_active .b-nav__link {
	color:#fff;
}
.b-nav_sub-level2 .b-nav__link {
	color:#436fad;
	text-decoration:underline;
}


.b-nav_level1>.b-nav__item:last-child>.b-nav__wrap-item, .b-nav_level1 .b-nav__item:last-child >.b-nav_sub-level2 > .b-nav__item:last-child .b-nav_sub-level3:last-child>.b-nav__item:last-child>.b-nav__wrap-item{
  border-radius: 0 0 10px 10px;
}

.b-nav_level1>.b-nav__item:last-child .b-nav_sub-level2 > .b-nav__item:first-child;
}

.b-nav__wrap-item{
  z-index: 3;
}

.b-nav_level1>.b-nav__item:last-child .b-nav_sub-level2 > .b-nav__item:first-child:before{
  content:'';
  top:-10px;
  left:0;
  right:0;
  height: 9px;
  background: #ddd;
}

.b-nav_level1>.b-nav__item:last-child>.b-nav__wrap-item:hover ~ .b-nav_sub-level2 > .b-nav__item:first-child:before {
  background:...

JavaScript

$('.b-nav__ar').click(function(){
		var that = $(this).parents('.b-nav__item').children('.b-nav_sub-level2');
		if($.browser.msie && $.browser.version=='7.0')// исправление косяка в ie7
			{
				if (that.is(':visible')){
					that.hide();
				}else {
					that.show();
				}
			}
		else {that.slideToggle(300);

				}
	});