I have the main menu horizontally and then I wanted my sub-menu also horizontally but I can not. 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;">
<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>