JSFiddle - React, Tailwind, and code Playground
by nikolya223
HTML
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="" content="">
<script src="http://ptica-schastya.besaba.com/scripts/jquery-1.8.2.js"></script>
<style>
*{
padding: 0px;
margin: 0px;
}
.b-nav {
list-style: none;
width: 220px;
}
.b-nav>li{
}
.b-nav div{
border-bottom:1px solid white;
}
.b-nav_level1>li>.b-nav__wrap-item{
padding-left: 10px;
background: #DDD;
}
.b-nav_level1>li>.b-nav__wrap-item:hover{
background: #3378B4;
cursor: pointer;
}
.b-nav>li>ul {
}
.b-nav_sub-level2>li{
padding-left: 10px;
}
.b-nav_level1>li>ul>li>div{
}
.b-nav_sub-level2>li>.b-nav__wrap-item{
background: #D6E4F0;
}
.b-nav_sub-level3>li>.b-nav__wrap-item{
background: #D6E4F0;
width: 200px;
}
.b-nav_sub-level2>li>.b-nav__wrap-item:hover{
background: #99BBD9;
cursor: pointer;
}
.b-nav_sub-level3>li>.b-nav__wrap-item:hover{
background: #99BBD9;
cursor: pointer;
}
.b-nav_sub-level3{
padding-left: 10px;
}
.b-nav_level1 li .lastOurVisiblediv{
background:red;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<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>
...