JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">

<li>
<ul>
<li><a href="page1.html">Sousliste 1</a></li>
<a href="page1.html"><li>Sousliste 1b</a></li>
</ul>
<img src= "http://www.alsacreations.com/xmedia/tuto/exemples/transitions/2.jpg" alt="" class="img-menu"/>
</li>


<li>
<ul>
<li >Sousliste 2</li>
<li >Sousliste 2b</li>
</ul>
<img src= "http://www.alsacreations.com/xmedia/tuto/exemples/transitions/2.jpg" alt="" class="img-menu"/>
</li>

<li>
<ul>
<li >Sousliste 3</li>
</ul>
<img src= "http://www.alsacreations.com/xmedia/tuto/exemples/transitions/2.jpg" alt="" class="img-menu"/></li>

<li>
<ul>
<li>Sousliste 4</li>
</ul>
<img src= "http://www.alsacreations.com/xmedia/tuto/exemples/transitions/2.jpg" alt="" class="img-menu"/>

</ul>

CSS

body {
margin: 250px;
background: pink;
color: #fff;
font: 1em "din",arial;
}

.img-menu {
position:absolute;
left: 0;
top: 0;
border: none;
-moz-transition-property: left;
-moz-transition-duration: .5s;
-moz-transition-timing-function: ease-out;}

li:hover img, li:focus img {
left:140px;
}

a {
color:green;
text-decoration:none;
}

ul {
margin: 0;
padding: 0;
list-style:none;
}


#menu>li {
position: relative;
display: inline-block;
vertical-align: top;
background:#777;
color: #fff;

height: 200px;
width: 200px;
margin: 0;
padding: 0;
overflow: hidden;
}

li ul {
font-size: 0.85em;
margin: 8px;
line-height: 1.4;
list-style:none;
}