I can’t seem to get him horizontal

Asked

Viewed 158 times

1

I have the main menu horizontal and then I wanted to put my sub-menu horizontal too but I can’t. My code:

.menu ul li{
    background-color:;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 140px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height:22px;              /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
    z-index:9999;              /* para por o menu a frente do  texto*/


}

.menu ul li:hover{
    background-color:black;       /* muda a cor do submenu quando  metes la o rato */


}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
    margin:  0px;

}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul li:hover > ul{             /* para quando por o rato no menu ementa, aparecer o sub menu*/
    display:block;

}

.menu ul ul ul{                     /* SOBRE AS CARNES E PEIXES*/
    margin-left:140px;              /* mover para a direita*/
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/

}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/

}


.menu a{                            /* OS MENUS*/
    color:white;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}
.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{  /* Alinhamento horizontal do Menu no Centro da Página*/
    -webkit-filter: blur(0);
}

nav {                                               /* aumenta a barra do menu*/
    width: 580px;
    margin: 0 auto;
}


a{
    text-decoration:none;
    color:#fff;
    padding:10px;
    margin:10px;
    display:table-cell;
    text-align:left;
    vertical-align:left;
    width:200px;
    height:0px;
    font-size:18px;
}


body{
    background-image:url(bg.jpg);   /* para por como imagem de fundo */
    background-attachment: fixed;   /* faz com  que a imagem n rode */
    background-size:100%;           /* para ajustar ao tamanho da janela */
    background-repeat:no-repeat;    /* n repetir a imagem*/
    background-color:#000;

.123 {
    z-index:9999;
}



    </style>
    </head>
<body>
<div class="123"style="background-color:#333333;">
  &nbsp;
    <a href="quinta.html">
        <img src="33.png" width="170" height="90" hspace="600">
    </a>

<nav class="menu">
    <ul>
        <div>
        <li><a href="Restaurante.html">Restaurante </a></li>
        <li><a href="#">Ementa</a>
            <ul>
                <li><a href="Entrada.html">Entrada</a></li>
                <li><a href="Prato Principal.html">Prato Principal</a>
                    <ul>
                        <li><a href="Carnes.html">Carnes</a></li>
                        <li><a href="Peixes.html">Peixes</a></li>
                        <li><a href="Vegetariano.html">Vegetariano</a></li>
                    </ul>
                </li>
                <li><a href="Sobremesas.html">Sobremesas</a></li>
            </ul>
        </li>
        <li><a href="Reserva.html">Reserva</a></li>
        <li><a href="Contacto.html">Contacto</a></li>
    </div>
    </ul>
    <br><br><br><br>
</nav>
</font> 
</div>
html css

  • Lucas which of the Sub-menus you want to put horizontal. What comes down from the "Menu" or what comes down from the "Main Course"?

  • what comes down from the menu.

1 answer

0


To move as little as possible in your CSS I used the property display:inline-flex; and adjusted the margins in two classes, thus:

/* Tirei o Display:Block */
.menu ul li:hover > ul{
    display: inline-flex;
}
/* Alterei os valores da Margin*/
.menu ul ul ul {
    margin-left: -30px;
    margin-top: 50px;
    top: 0px;
    position: absolute;
}

Run the Snippet to see the result (click "Whole Page" to display the menu better, as your CSS has no treatment for responsive.)

.menu ul li{
    background-color:;             /* muda a cor da barra */
    float: left;                   /* ficar horizontal */
    width: 140px;                  /* tamanho da barra */
    height: 50px;                  /* altura da barra */
    display: inline-block;
    text-align:center;             /* ficar a esqueda*/
    line-height:22px;              /* mover o submenu*/
    font-size: 24px;               /* tamanho da letra*/
    position: relative;
    z-index:9999;              /* para por o menu a frente do  texto*/


}

.menu ul li:hover{
    background-color:black;       /* muda a cor do submenu quando  metes la o rato */


}

.menu ul{
    padding: 0px;                   /* move a barra para a direita */
    margin:  0px;

}

.menu ul ul{
    display: none;                  /* para  o sub sub menu ficar invisivel*/
}

.menu ul ul li:hover{               /* SUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor do  submenu*/

}

.menu ul ul ul li:hover{            /* SUBSUBMENU DA EMENTA*/
    background-color:#80bfff;       /* cor*/

}

.menu a{                            /* OS MENUS*/
    color:white;                    /* cor do texto*/
    text-decoration: none;          /* sem decoração*/
}
.menu li {
    -webkit-filter: blur(0);
    -webkit-transition: -webkit-filter 0.5s ease-in-out;
}
.menu:hover li {
    -webkit-filter: blur(1.5px);
}
.menu:hover li:hover, .menu:hover li:hover ul li{  /* Alinhamento horizontal do Menu no Centro da Página*/
    -webkit-filter: blur(0);
}

nav {                                               /* aumenta a barra do menu*/
    width: 580px;
    margin: 0 auto;
}


a{
    text-decoration:none;
    color:#fff;
    padding:10px;
    margin:10px;
    display:table-cell;
    text-align:left;
    vertical-align:left;
    width:200px;
    height:0px;
    font-size:18px;
}
body{
    background-image:url(bg.jpg);   /* para por como imagem de fundo */
    background-attachment: fixed;   /* faz com  que a imagem n rode */
    background-size:100%;           /* para ajustar ao tamanho da janela */
    background-repeat:no-repeat;    /* n repetir a imagem*/
    background-color:#000;
}
.123 {
    z-index:9999;
}

/* Tirei o Display:Block */
.menu ul li:hover > ul{
    display: inline-flex;
}
/* Alterei os valores da Margin*/
.menu ul ul ul {
    margin-left: -30px;
    margin-top: 50px;
    top: 0px;                       /* ir para baixo*/
    position: absolute;
}
<div class="123" style="background-color:#333333;">
&nbsp;
<a href="quinta.html">
    <img src="33.png" width="170" height="90" hspace="600">
</a>

<nav class="menu">
<ul>
    <div>
    <li><a href="Restaurante.html">Restaurante </a></li>
    <li><a href="#">Ementa</a>
        <ul>
            <li><a href="Entrada.html">Entrada</a></li>
            <li><a href="Prato Principal.html">Prato Principal</a>
                <ul>
                    <li><a href="Carnes.html">Carnes</a></li>
                    <li><a href="Peixes.html">Peixes</a></li>
                    <li><a href="Vegetariano.html">Vegetariano</a></li>
                </ul>
            </li>
            <li><a href="Sobremesas.html">Sobremesas</a></li>
        </ul>
    </li>
    <li><a href="Reserva.html">Reserva</a></li>
    <li><a href="Contacto.html">Contacto</a></li>
</div>
</ul>
<br><br><br><br>
</nav>
</div>

  • worked. thanks for your help

Browser other questions tagged html css

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