JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul id="nav">
        <li><a href="#"><img src="http://cheburek.nightmail.ru/021.jpg"></a>
            <ul>
                <li>clowo 1</li>
            </ul>
        </li>
        <li><a href="#"><img src="http://cheburek.nightmail.ru/073.jpg"></a>
            <ul>
                <li>clowo 2</li>
            </ul>
        </li>
        <li><a href="#"><img src="http://cheburek.nightmail.ru/032.gif"></a>
            <ul>
                 <li>clowo 3</li>
            </ul>
        </li>
    </ul>
</div>

CSS

#header{
    width:100%;
    height:200px;
    background:#ccc;
    padding-top:30px;
    overflow:hidden;
    }
#nav{
    width:300px;
    margin:auto;
   }

#nav li{
    list-style:none;
    float:left;
    margin-left:10px;
    position:relative;
    }

#nav li a{
    display:block;
    text-decoration:none;
    }
#nav li a img{
    border:1px solid #36b;
    display:block;
    width:87px;
    }
#nav li ul{
    display:none;
    position:absolute;
    top:100px;
    }
#nav li:hover ul{
    display:block;
    }