Turn this menu into sub-menus?

Asked

Viewed 179 times

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 sub-menus on it? Example, I want to split these items from it 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) from there by clicking on it or giving one hover, it display its sub categories..

html5 css3

  • Take a look here: http://www.linhadecodigo.com.br/artigo/3464/criando-um-menu-vertical-dropdown-com-css-e-html.aspx I think that’s what you’re talking about

  • Long ago I made this menu : http://jsfiddle.net/lautert/7t2Dq/6/

  • I will publish the answer that I found simpler and more appropriate, without using Javascript etc, I had just forgotten how to apply transformations to another object using CSS, now I know it is with the fate of higher >

1 answer

0


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 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>

In the 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);
}

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.