.menucat  {
   margin: auto 
}

.menucat small {
    display: none
}
/* Reset */
.menucat ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Primo livello */
.menucat > li {
    position: relative;
    display: inline-block;
    /* background: #f2f2f2; */
    padding: 2px 5px;
    /* border: 1px solid #ccc; */
}

.menucat > li > a {
    text-decoration: none;
    color: #ffffff;
    /* font-weight: bold; */
}

.menucat > li > a:hover {
    color: #ffffff;
    text-decoration: none;
}
/* Sotto-menu nascosti */
.menucat li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    min-width: 220px;
    z-index: 1000;
}

/* Elementi dei sotto-menu */
.menucat li ul li {
    position: relative;
    padding: 0px 5px;
    background: #fff;
}

.menucat li ul li a {
    color: #333;
    text-decoration: none;
    justify-content: space-between; /* freccia a destra */
}

/* Mostra submenu al passaggio */
.menucat li:hover > ul {
    display: block;
}

/* Submenu di secondo livello */
.menucat li ul li ul {
    left: 100%;
    top: 0;
    max-height: 70vh;
    overflow-y: auto;
}

/* Hover */
.menucat li:hover {
    background: #01456b;
}

.menucat li ul li:hover {
    background: #bee8ff;
}

/* --- FRECCIA AUTOMATICA --- */

/* Aggiunge una freccia ai <li> che contengono un <ul> */
.menucat li:has(> ul) > a::after {
    content: " ▼";
    font-size: 0.8em;
    color: #55c1d8;
    /* margin-left: auto; */
}

/* Freccia laterale per submenu annidati */
.menucat li ul li:has(> ul) > a::after {
    content: " ▶";
    right: 0;
}

/* Rende i link dei submenu flessibili per spingere la freccia a destra */
.menucat li ul li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Freccia ▶ per i submenu, allineata a destra */
.menucat li ul li:has(> ul) > a::after {
    content: "▶";
    margin-left: 10px;
}