menu a tendina 3 livelli

pettedemon

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!

lumpi

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 ul

3- > ul ul ul li a:hover{
background: yellow;
}
diventa
ul ul ul li a:hover{
background: yellow;
width: 190px;
}

dovrebbe essere tutto

pettedemon

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