JSFiddle - React, Tailwind, and code Playground

HTML

<div class="default" id="menu">
							<div class="container">
								<ul class="menuui">
									<li>
										<a href="#2">Каталог</a>
										<ul id="ul_pod">
											<li>
												<a href="#2.1">Бытовые</a>
												<ul>
													<li>
														<a href="#2.1.1">Алмак(Almac)</a></li>
													<li>
														<a href="#2.2.2">Пион Люкс</a></li>
													<li>
														<a href="#2.2.3">Пион Керамик</a></li>
													<li>
														<a href="#2.2">Пион Thermo Glass</a></li>
													<li>
														<a href="#2.2.3">Иколайн</a></li>
													<li>
														<a href="#2.2.3">РИО(РиоЛэнд)</a></li>
													<li>
														<a href="#2.2.3">Ballu(Баллу)</a></li>
												</ul>
											</li>
											<li>
												<a href="#2.2">Для дома и дачи</a></li>
											<li>
												<a href="#2.2">Уличные</a>
												<ul>
													<li>
														<a href="#2.1.1">Heliosa(Италия)</a></li>
													<li>
														<a href="#2.2.2">AEG</a></li>
												</ul>
											</li>
											<li>
												<a href="#2.3">Промышленные</a>
												<ul>
													<li>
														<a href="#2.1.1">Пион</a></li>
													<li>
														<a href="#2.2.2">Иколайн</a></li>
													<li>
														<a href="#2.2.3">Hyundai</a></li>
													<li>
														<a href="#2.2.3">Ballu(Баллу)</a></li>
												</ul>
											</li>
											<li>
												<a href="#2.3">Влагозащищённые</a>
												<ul>
													<li>
														<a href="#2.1.1">Hyundai</a></li>
													<li>
														<a href="#2.1.1">Heliosa(Италия)</a></li>
												</ul>
											</li>
											<li>
												<a href="#2.3">Армстронг 60*60</a></li>
											<li>
												<a href="#2.3">Терморегуляторы &nbsp;<img alt="" src="/data/files/photo/raznoe/3563_new.png" style="width: 20px; height: 22px;"...

CSS

#menu { 
height: 42px; 
margin-top: -23px;
background: #027bb5; /* Old browsers */ 
background: -moz-linear-gradient(top, #027bb5 0%, #015b9b 101%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #027bb5 0%,#015b9b 101%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #027bb5 0%,#015b9b 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#027bb5', endColorstr='#015b9b',GradientType=0 ); /* IE6-9 */ 
} 
#menu .container { 
width: 925px; 
margin: 0 auto;
text-align: center;
} 
#menu a { 
display: inline-block; 
text-decoration: none; 
padding: 10px 15px; 
color: #fff; 
font-size: 12.5pt;
background: #027bb5;
background: -moz-linear-gradient(top, #027bb5 0%, #015b9b 101%);
background: -webkit-linear-gradient(top, #027bb5 0%,#015b9b 101%);
background: linear-gradient(to bottom, #027bb5 0%,#015b9b 101%);
} 
#menu a:after{ 
content: '';  
display: block;  
width: 5px; 
height: 40px;
background-image: url(http://snosim.com.css.1c-bitrix-cdn.ru/bitrix/templates/snosim/img/line.png); 
background-repeat: no-repeat; 
background-position: center top;
overflow: hidden; 
position: absolute; 
top: 11px; 
right: -1px;
}
#menu li:last-child a:after { 
    content: none; 
}
#menu a:hover { 
background: #161e84; /* Old browsers */ 
background: -moz-linear-gradient(top, #161e84 0%, #003056 101%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #161e84 0%,#003056 101%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #161e84 0%,#003056 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#161e84', endColorstr='#003056',GradientType=0 ); /* IE6-9 */ 
}
.menuui, .menuui li, .menuui ul, .menuui a, .menuui:after {
  margin: 0; 
  padding: 0;
  z-index: 200;
  display: block;
}
.menuui { 
    display: inline-block; 
} 
.menuui:after { /* убираем после меню действие float */...