Turn this menu into sub-menus?

Question

Turn this menu into sub-menus?

Navigation

#1 by (0 votes)

3

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 in it? For example, I want to divide these items into just two categories, Administração and Sistema , and separate those items between those 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 (admin and System) then clicking on it or giving hover , it will display its sub categories ..

html5 css3

asked by anonymous 26.08.2015 / 20:29

1 answer

How to change the background color of a bootstrap-slider plugin's slider? JavaMail: MailBox always lowers the same email

score 0 · Accepted Answer

I looked at another example on the internet and in CSS, I ended up seeing what I had forgotten, which is the > sign that is to indicate what to change in an object when an action in another object. It looks 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);
}