JSFiddle - React, Tailwind, and code Playground

by kaktusvit

HTML

<div class="saitbar">
 <ul class="menu-4">
   <li><a href="#">1 меню</a></li>
   <li><a href="#">2меню </a>
     
   </li>
   <li><a href="#">3 меню ⇒</a>
     <ul class="podmenu">
       <li><a href="#"> 3подпкнкт сылка 1</a></li>
       <li><a href="#">3подпункт сылка 2</a></li>
       
     </ul>
   </li>
   <li><a href="#">4 меню</a></li>
 </ul>
</div>

CSS

.saitbar {
     margin: 0 auto;
     padding: 0;
     width: 100%;
     }
  .menu-4, .menu-4 .podmenu, .menu-4  {
     margin: 0;
     padding: 0;
     background-color: #999;
     height: auto;
     list-style-type: none;
     }
  .menu-4 li {
     margin: 0 0 2px;
     padding: 0;
     background-color: #990000;
     border-left: 26px solid #273ed9;
     transition: all 0.7s ease 0s;
     display:inline-block;
     position: relative;
     }
  .menu-4 a {
     padding: 6px 0 8px 10px;
     color: #f2f2f2;
     text-decoration: none;
     border-left: 6px solid #5269ff;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 li:hover {
     background-color: #ccc;
     }
  .menu-4 li:hover a {
     color: #0e25c0;
     padding: 6px 0 8px 22px;
     border-left: 6px solid #900000;
     }
  .menu-4 ul.podmenu, .menu-4 ul{
     display: none;
     position: absolute;
     top: 34px;
     width: 150px;
     background-color: #ccc;
     }
  .menu-4 ul.podmenu {
     left: 7px;
     }
  .menu-4 ul{
     left: 150px;
     }
  .menu-4 li:hover .podmenu, .podmenu li:hover {
     display: block;
     padding: 4px 0 4px 14px;
     }
  .menu-4 .podmenu li, .podmenu  {
     margin: 0;
     padding: 0;
     background-color: #ccc;
     border-left: 0 solid #273ed9;
     transition: all 0.7s ease 0s;
     display: block;
     }
  .menu-4 .podmenu li a, .podmenu {
     border-left: 0 solid #900000;
     padding: 4px 10px;
     color: #444;
     font-size: 14px;
     border-bottom: 1px dotted #999;
     }
  .menu-4 .podmenu li a:hover, .podmenu {
     color: #0e25c0;
     }