JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
<li><a href="index.htm" title="Home">Home</a></li>
<li><a href="project.htm" title="Project">Project</a></li>
<li><a href="sample.htm" title="Sample">Sample</a>
<ul id="dropdown">
    <li><img src="http://mi.eng.cam.ac.uk/research/projects/Query/img/arrow.png"/></li>
    <li>Dropdown1</li>
    <li>Dropdown2</li>
    <li>Dropdown3</li>
    </ul>   
</li>
</ul>

CSS

#nav li{
    float: left;
    padding: 5px;
}
#dropdown {
    display: none;
}

#nav li:hover #dropdown{
    display: block;
    position: absolute;
}

#dropdown li {
    float: none;
}

img {
    width: 80px;
    height: 60px;
    position: absolute;
    top: 20px;
    left: -90px;
}