html5 – Make this menu into sub-menus?

Question:

I have this vertical menu:

<!-- Coluna2 -->
            <div id="d2" align="right">
                <nav id="menu">
                    <ul id="menu-nav">
                        <li><a href="cEmpresa.html">Hotel</a></li>
                        <li><a href="#">Clientes</a></li>
                        <li><a href="cFuncionarios.html">Funcionários</a</li>
                        <li><a href="cQuartos.html">Quartos</a></li>
                        <li><a href="#">Produtos</a></li>
                        <li><a href="#">Serviços</a></li>
                        <li><a href="#">Reservas</a></li>
                        <li><a href="#">Fechamento</a></li>
                    </ul>
                </nav>
            </div>

Your CSS:

/* COLUNA2*/
#d2
{
    border-style: solid;
    border-color: rgba(64, 118, 182, .3);
    margin-top: -10px;
    height: 110%;
    background-color: rgba(64, 118, 182, .5);
    display: block;
    float: right;
    width: 20%;
}

How do I put submenus on it? Example, I want to split these items of his into just two categories, Administração and Sistema and separate these items between these two new categories. Example:

Administração
    Funcionários
    Hotel
    Relatórios

Sistema
    Clientes
    Produtos
    Reservas

How do I do this in the simplest way? I wanted to display only the two categories (Administration and System) then, when clicking on it or hover , it displays its sub-categories..

Answer:

I looked at another example on the internet and in CSS, I ended up seeing what I had forgotten, which is the > sign, which is to indicate what to change in an object when there is an action in another object. It looked like this:

HTML Menu

<nav id="menu">
<ul id="menu-nav">
    <hr id="linha" />
    <li id="opc"><a href="#">Administração</a>
        <ul id="sub">
            <hr/>
            <li><a href="Feedbacks.html">Feedbacks</a></li>
            <li><a href="cFuncionarios.html">Funcionários</a></li>
            <li><a href="cEmpresa.html">Hotel</a></li>
            <li><a href="Relatorios.html">Relatórios</a></li>
        </ul>
    </li>

    <br/>
    <hr id="linha" />
    <br/>
    <li id="opc"><a href="#">Sistema</a>
        <ul id="sub">
            <hr/>
            <li><a href="cCheckOut.html">CheckOut</a></li>
            <li><a href="cCliente.html">Clientes</a></li>
            <li><a href="cProdutos.html">Produtos</a></li>
            <li><a href="cQuartos.html">Quartos</a></li>
            <li><a href="cReservas.html">Reservas</a></li>
            <li><a href="cServicos.html">Serviços</a></li>
        </ul>
    </li>
    <hr id="linha" />
</ul>
</nav>

No CSS

/* MENU*/
nav#menu
{
    margin-top: -20px;
    float: right;
    margin-right: 20px;
}

#menu-nav li
{
    list-style: none;
    display: run-in;
}


#sub
{
    margin-right: 20px;
    display: none;
}
#sub a
{
    height: 50px;
    color: azure;
}

#menu-nav li:hover > #sub
{
    width: auto;
    display: block;
}

#sub a:hover
{
    border-bottom: 3px solid black;
}
#menu-nav li a
{
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1;
    line-height: 60px;
    display: block;
    text-transform: uppercase;
}
#opc a:hover
{
     border-bottom: 3px solid rgba(0, 0, 0, .5);
}