JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.topul,
.topulsub ul {    
    margin: 0;
    padding: 0;
    
    list-style: none;
}

.topul {
    display:table;
    width: 100%;    
}

.topul > li {
    display: table-cell;  
    position: relative;    
}

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

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

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

.topulsub {
    position: relative;
}

.topulsub ul {    
    min-width: 100%;
    
    display: none;
    position: absolute;
    
    white-space: nowrap;
}