<div class=”minibasket-menu-bar”>
<a href=”#baby20″ class=”menu-item selected”>BABYBASKET 2020</a>

<a href=”#pulcini19″ class=”menu-item”>PULCINI 2019</a>
<a href=”#scoiattoli18″ class=”menu-item”>SCOIATTOLI 2018 (Pertini)</a>
<a href=”#scoiattoli1918″ class=”menu-item”>SCOIATTOLI 2019-18 (Farini)</a>
<a href=”#scoiattoli17″ class=”menu-item”>SCOIATTOLI 2017</a>
<a href=”#aquilotti1716″ class=”menu-item”>AQUILOTTI 2017-16 (Farini)</a>
<a href=”#aquilotti16″ class=”menu-item”>AQUILOTTI 2016</a>
<a href=”#aquilotti15″ class=”menu-item”>AQUILOTTI 2015</a>
<a href=”#baby2122″ class=”menu-item”>BABYBASKET 2022-21</a>
</div>

.minibasket-menu-bar {
display: flex;
flex-wrap: wrap; /* Permette ai pulsanti di andare a capo su schermi piccoli */
border-bottom: 2px solid #a30000; /* Linea rossa (simulando l’esempio di ballo) */
padding: 5px 0 0;
}

.minibasket-menu-bar .menu-item {
padding: 10px 15px;
margin-right: 5px; /* Spazio tra i pulsanti */
margin-bottom: 5px; /* Spazio per la riga in basso */
text-decoration: none;
color: #444;
font-weight: bold;
background-color: #f5f5f5; /* Sfondo leggermente grigio (come l’input che hai fornito) */
border: 1px solid #ddd;
border-bottom: none; /* Rimosso per l’effetto linguetta */
transition: background-color 0.2s;
text-transform: uppercase;
font-size: 14px;
}

/* Stile per il pulsante Selezionato */
.minibasket-menu-bar .menu-item.selected {
border-top: 2px solid #a30000; /* Bordo superiore rosso più spesso */
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 0;
background-color: #fff; /* Sfondo bianco per evidenziare */
color: #a30000; /* Testo rosso per evidenziare */
margin-bottom: -2px; /* Solleva leggermente sopra la linea rossa */
position: relative;
z-index: 10;
}

.minibasket-menu-bar .menu-item:hover:not(.selected) {
background-color: #eee;
}