JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul style="display: inline; list-style-type: none;">
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Adidas" href="#"><img title="Adidas" onmouseover="show('adidas')" onmouseout="hide('adidas')" src="#" alt="Adidas" height="100" width="100" /></a>
    <ul id="adidas" style="display:none">
        <li>hello</li>
        <li>world</li>
    </ul>
    </li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Jordan Brand" href="#"><img title="Jordan Brand" onmouseover="show('jordan_brand')" onmouseout="hide('jordan_brand')" src="#" alt="Jordan Brand" height="100" width="100" /></a>
    <ul id="jordan_brand" style="display:none">
        <li>more</li>
        <li>and more</li>
    </ul>
    </li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Nike" href="#"><img title="Nike" src="#" alt="Nike" height="100" width="100" /></a></li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
</ul>
</div>
<div style="clear:both;"></div>
<script>
    function show(id){
        document.getElementById(id).style.display = "block";
    }
    
    function hide(id){
        document.getElementById(id).style.display = "none";
    }
</script>