JSFiddle - React, Tailwind, and code Playground

by masmiguel

HTML

<div class="selectVeggys">
  Select
  <ul>
    <li><img src="https://www.veggysfastfood.es/125-home_default/agua-con-gas-san-pellegrino.jpg"></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

CSS

.selectVeggys { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid #54585A; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.selectVeggys > ul { display: none; list-style:none; }
.selectVeggys:hover > ul {display: block; background: white; border-top: 1px solid #54585A;}
.selectVeggys:hover > ul > li { padding: 5px; list-style:none;}
.selectVeggys:hover > ul > li > img {width:100px;}
.selectVeggys:hover > ul > li:hover { background: orange;}
.selectVeggys:hover > ul > li:hover > a { color: red; }