JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="zornusan_numag">
            <ul>
               <li class="active"><a href="#"><span>Главная</span></a></li>
               <li class="arunimedun"><a href="#"><span>Продукты</span></a>
                  <ul>
                     <li><a href="#"><span>Продукт 1</span></a></li>
                     <li><a href="#"><span>Продукт 2</span></a></li>
                     <li><a href="#"><span>Продукт 3</span></a></li>
                     <li class="last"><a href="#"><span>Продукт 4</span></a></li>
                  </ul>
               </li>
               <li><a href="#"><span>О компании</span></a></li>
               <li class="last"><a href="#"><span>Контакты</span></a></li>
            </ul>
        </div>

CSS

/* Контейнер меню */	
#zornusan_numag{ height:37px; 
	padding:0; 
	margin: 0 auto;  
	border:1px solid; 
	border-radius:5px;
	width:90%;}
	
/* Удаляем маркеры, выводим в виде строки, задаем относительное позиционирование */ 
#zornusan_numag > ul {list-style:inside none; 
	padding:0; 
	margin:0;} 
#zornusan_numag > ul > li {list-style:inside none; 
	padding:0; 
	margin:0; 
	float:left; 
	display:block; 
	position:relative;}
	
/* Текст ссылок */  
#zornusan_numag > ul > li > a{ outline:none; 
	display:block; 
	position:relative; 
	padding:12px 20px; 
	font:bold 13px/100% Arial, Helvetica, sans-serif; 
	text-align:center; 
	text-decoration:none; 
	text-shadow:1px 1px 0 rgba(0,0,0, 0.4);}
	
/* Стиль первого элемента списка */ 	 
#zornusan_numag > ul > li:first-child > a{border-radius:5px 0 0 5px;}

/* Разделители */  
#zornusan_numag > ul > li > a:after{ content:''; 
	position:absolute; 
	border-right:1px solid;
	border-color:#747882; 
	top:-1px; 
	bottom:-1px; 
	right:-2px; 
	z-index:99;} 
#zornusan_numag ul li.arunimedun:hover > a:after{top:0; bottom:0;}

/* Маркер выпадающего списка */ 
#zornusan_numag > ul > li.arunimedun > a:before{ content:''; 
	position:absolute; 
	top:17px; 
	right:6px; 
	border:5px solid transparent; 
	border-top:5px solid #fff; }
	
/* Маркер выпадающего списка при наведении */ 
#zornusan_numag > ul > li.arunimedun:hover > a:before{top:23px;}

/* Цвет пункта меню выпадающего списка при наведении*/ 
#zornusan_numag ul li.arunimedun:hover > a{ background:#51707C; 
	border-color:#51707C; 
	padding-bottom:13px; 
	padding-top:13px; 
	top:-1px; 
	z-index:999; }
#zornusan_numag ul li.arunimedun > a:hover{background:#51707C;} 
#zornusan_numag ul li.arunimedun:hover > ul, #zornusan_numag ul li.arunimedun:hover > div{display:block; 
	border-color:#51707C;}
	
/* Выпадающий список */	 
#zornusan_numag ul li > ul, #zornusan_numag ul li > div{ display:none; 
	width:auto; 
	position:absolute; 
	top:38px; 
	padding:10px 0; 
	background:#51707C;...