JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="dropdown">
  <button class="maine">Recettes sucrées \/</button>
  <div class="dropdown-child">
    <a href="page2.html"> Tiramisu </a>
    <a href="page2.html#ancre1"> Pâte à tartiner </a>
    <a href="page2.html#ancre2"> Crêpes </a>
  </div>
</div>
<div class="dropdown">
  <button class="maine">\/ Recettes salées</button>
  <div class="dropdown-child">
    <a href="page3.html"> Flammekueche </a>
    <a href="page3.html#ancre3"> Tarte à la tomate et à la moutarde </a>
    <a href="page3.html#ancre4"> Gyoza </a>
  </div>
</div>

CSS

.maine{
font-size: 30px;
color: #d50a66;
text-align: right;
font-family: gabriola;
cursor: pointer;
padding: 10px;
background-color: #e7cc9e;
margin-left: 50px;
}
.maine:hover{
background-color: #e7cc9e;
}

.dropdown{
position: relative;
display: inline-block;
text-align: right;
}

.dropdown-child{
display: none;
background-color: #e7cc9e;
min-width: 50px;
position: absolute;
top: 100%;
left: 0;
}

.dropdown-child a{
color: #d50a66;
padding: 20px;
display: block;
}

.dropdown:hover .dropdown-child{
display: inline;
}