- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- menu a tendina 3 livelli
-
menu a tendina 3 livelli
Ciao a tutti!
Sto cercando di finire un menù a tendina ma non riesco a capire 2 cose.
Ecco il codice<link href="css/menu_pette.css" rel="stylesheet" type="text/css" /> <div id="menu_marchesini"> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#">il complesso</a></li> <li><a href="#">appartamento nuovo</a> <ul> <li><a href="#">Menu 1-2-1</a></li> <li><a href="#">Menu 1-2-2</a></li> <li><a href="#">Menu 1-2-3</a></li> </ul> </li> <li><a href="#">Menu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Menu 2-1</a></li> <li><a href="#">Menu 2-2</a></li> <li><a href="#">Menu 2-3</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Menu 3-1 anche voglia</a></li> <li><a href="#">Menu 3-2</a></li> <li><a href="#">Menu 3-3</a> <ul> <li><a href="#">Menu 3-3-1</a></li> <li><a href="#">Menu 3-3-2</a></li> <li><a href="#">Menu 3-3-3</a></li> </ul> </li> </ul> </li> </ul> </div>
e il css
body{ background-color: #c2c3c1; } #menu_marchesini{ padding:0; maragin:0; z-index: 1000; } li{ position: relative; float: left; list-style: none; margin: 0; padding:0; z-index: 1000; } li a{ height: 40px; display: block; text-decoration:none; text-align: left; line-height: 40px; color: #333; background: none; z-index: 1000; padding-left:10px; } li a:hover{ background: none; } ul ul{ position: absolute; top: 40px; visibility: hidden; font: 14px Arial, Helvetica, sans-serif; z-index: 1000; background-color: cadetblue; text-align:left; } ul ul li a{ height: 30px; display: block; text-decoration:none; text-align: left; line-height: 30px; color:; background: none; z-index: 1000; padding-left:10px; width: 200px; } ul{ padding:0; margin:0; font: italic bold 18px Georgia, "Times New Roman", Times, serif; } ul li:hover ul { visibility:visible; z-index: 1000; } ul ul li a:hover{ background: maroon none; } ul ul ul li { visibility: hidden; left:210px; top:-40px; background-color: black; width: 200px; } ul ul ul li a:hover{ background: yellow; } ul ul li:hover ul li { visibility:visible; }
Quando passo sopra al primo che contiene 2 livelli mi appare un pezzetto in più che non riesco a eliminare e capire e l'errore.
Inoltre non riesco a sistemare l'hover del 3 livello che ha 10px in più di padding... Riuscite a darmi una mano? Grazie!
-
Ciao,
se non hai ancora risolto, eccoti alcune dritte.1- Usa display al posto di visibility perchè "visibility" tiene occupato lo spazio relativo
2- > #menu_marchesini li a:hover
diventa ul ul li ul3- > ul ul ul li a:hover{
background: yellow;
}
diventa
ul ul ul li a:hover{
background: yellow;
width: 190px;
}dovrebbe essere tutto
-
Grazie!
Ecco come ho risolto:body{ background-color: #c2c3c1; } #menu_sito{ padding:0; margin:0; z-index: 1000; } ul{ padding:0; margin:0; font: italic bold 18px Georgia, "Times New Roman", Times, serif; } li{ position: relative; float: left; list-style: none; margin: 0; padding:0; z-index: 1000; } li a{ height: 40px; display: block; text-decoration:none; text-align: left; line-height: 40px; color: #333; background: none; z-index: 1000; padding-left:12px; padding-right: 12px; } li a:hover{ background: none; } ul li:hover ul{ visibility:visible; z-index: 1000; } ul li:hover ul ul{ visibility:hidden; z-index: 1000; } ul ul{ position: absolute; top: 40px; visibility: hidden; font: 14px Arial, Helvetica, sans-serif; z-index: 1000; background-color: cadetblue; text-align:left; } ul ul li a{ height: 30px; display: block; text-decoration:none; text-align: left; line-height: 30px; color:; background: none; z-index: 1000; width: 176px; } ul ul li a:hover{ background: #171717; color: #f87a2b; } ul ul li:hover ul{ visibility:visible; } ul ul ul{ visibility: hidden; position:absolute; left:200px; top:0; background-color: black; width: 200px; } ul ul ul li a{ margin:0; height: 30px; display: block; text-decoration:none; text-align: left; color:; background: none; z-index: 1000; } ul ul ul li a:hover{ background: yellow; }