JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<UL id="menu">
		<li>
           <a href="#"><span>Файл</span></a>
           <ul class=list>
		          <li><a href="#">Новый</a></li>
		          <li><a href="#">Открыть</a></li>
		          <li><a href="#">Сохранить</a></li>
		          <li><a href="#">Закрыть</a></li>
           </ul>
		</li>
		<li>
           <a href="#"><span>Правка</span></a>
           <ul  class=list>
		          <li><a href="#">Вырезать</a></li>
		          <li><a href="#">Копировать</a></li>
		          <li><a href="#">Вставить</a></li>
		          <li><a href="#">Удалить</a></li>
           </ul>
	</UL>
    <span>Всем привет!</span>

CSS

ul
    {
       list-style: none;
    }
UL#menu > li
    {
		   display: inline-block;
		   position: relative;
		   box-sizing: border-box;
       transition: all .22s ease, box-shadow .1s ease;  
    }
UL#menu a
	  {
    	 text-decoration: none;
		   display: block;	
	  }
UL#menu > li >  a
	  {
	     position: relative;
       padding: 10px;
       padding-bottom: 8px;
	     font-weight: bold;
	     z-index: 1;
       transition: all .22s ease;
    }
UL#menu > li, UL#menu > li >  a
    {
       border-radius: 10px 10px 0 0;        
    }
UL#menu > li >  a > span
    {
       border-bottom: 1px solid #080080;    
    }
UL#menu > li:hover >  a > span
    {
       border-bottom: none;
    }
UL#menu > li:hover > a
    {
       color: #F3A;
	     background: #F7D7E5;
    }
ul.list
    {  
	     position: absolute;
       background: #F7D7E5;
       cursor: pointer;
	     color: #301DAD;
	     margin-top: -1px;
	     border-radius: 0 9px 9px 9px;
	     padding: 2px 3px 2px 2px; margin: 0;        
       visibility: hidden;
       opacity: 0;
       transition: all .22s ease, box-shadow .1s ease;
    }
li:hover ul.list
    { 
       visibility:  visible;
       opacity: 1;
    }
ul.list > li
    {
       padding: 9px 7px 5px 8px;
	     margin: 0;
    }
ul.list li:hover
    {
       background: #91265b;
    }
ul.list > li > a
    {
       color: blue;
    }
ul.list > li:hover > a
    {
	     color: #fefff7;        
    } 
ul.list > li, ul.list > li > a
    {
       transition: all .1s ease;      
    }
UL#menu > li:hover, li:hover ul.list
    {
    	 box-shadow: 0 0 10px rgba(51,20,48, 0.5);
       transition: all .22s ease, box-shadow 0.04s ease-out .1s;    
    }