/* --- Oldalsó Menü Stíluslap --- */

/* Alapbeállítások a menü komponens oldalára */
body {
    background-color: #333;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

/* A fő menü konténer */
#side-menu {
    width: 250px; /* A menü szélessége */
}

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

#side-menu li {
    position: relative; /* Ez a kulcsa az almenük pozicionálásának */
    margin-bottom: 8px; /* Távolság a menüpontok között */
}

#side-menu a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    background-color: #b8860b; /* Sötét arany */
    border: 1px solid steelblue; /* Metálkék keret */
    border-radius: 5px; /* Lekerekített sarkok */
}

/* Hover effektus a menüpontokon */
#side-menu a:hover {
    background-color: #daa520; /* Világosabb arany */
}

/* Jelzés, hogy egy menüpontnak van almenüje */
#side-menu .has-submenu > a::after {
    content: '»'; /* Jobbra mutató nyíl */
    float: right;
    font-size: 1.2em;
    line-height: 1;
}


/* --- Almenü Logika --- */

/* Alapból minden almenü rejtett */
#side-menu .submenu {
    display: none;
    position: absolute;
    left: 100%; /* A szülő elem jobb szélétől indul */
    top: 0;      /* A szülő elem tetejéhez igazítva */
    width: 250px; /* Azonos szélesség */
    background-color: #444; /* Eltérő háttér az almenüknek */
}

/* Megjelenítés, ha a szülő LI fölé visszük az egeret, VAGY ha aktív (kattintva) */
#side-menu li:hover > .submenu,
#side-menu li.submenu-active > .submenu {
    display: block;
}