JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="topul">
							<li><a href="">firefox не камильфо</a></li>
							<li><a>firefox не камильфо</a>
								<ul class="topulsub">
									<li><a href="">Это факт.</a></li>
									<li><a href="">Это факт.</a></li>								
								</ul>
							</li>
							<li><a>firefox не камильфо</a>
								<ul class="topulsub">
									<li><a href="">Это факт.</a></li>
									<li><a href="">Это факт.</a></li>
									<li><a href="">Это факт.</a></li>
									<li><a href="">Это факт. Старичек IE и то лучше!=)</a></li>
								</ul>
							</li>
							<li><a>firefox не камильфо</a>
								<ul class="topulsub">
									<li><a href="">Это факт</a></li>
								</ul>
							</li>						
						</ul>

CSS

.topul {
    margin:0 auto;
    width:90%;
display:block;
}

.topul li {
    width:25%;
    text-align:center;
display:inline-block;
position:relative;
    margin-right:-4px;
}

.topul a {
border-left:1px solid #fff;
border-right:1px solid #e5e5e5;
background: #f9f9f9;
display:block;
padding:9px 20px;
text-decoration:none;
}

.topul a:hover {
background: #ffeb8c;
}

.topul li:hover > .topulsub {
display:block;
}

.topulsub {
    width:100%;
    left:-40px;
display:none;
position:absolute;
    white-space:nowrap;
}

.topulsub li {
display:block;
    width:100%;
text-align:left;
}