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 4px 11px;
}

.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: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;
  margin: 0px;
}
.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__wrap-item{
  z-index: 3;
}

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);

				}
	});