problem css menu dropdown multilevel

Hi,
I have a problem with a css menu.
When I click on the first level if there is the third level it appears a strange square


Here the css code

body{
	background-color: #c2c3c1;
}


#menu_sito{
padding:0;
maragin:0;
z-index: 1000;

}

#menu_sito li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
z-index: 1000;
}

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


#menu_sito li a:hover{
background: none;

}

#menu_sito ul{
padding:0;
margin:0;
font: italic bold 18px Georgia, "Times New Roman", Times, serif;
}



#menu_sito ul li:hover ul {

visibility:visible;
z-index: 1000;
}

#menu_sito ul ul{
	position: absolute;
	top: 40px;
	visibility: hidden;
	font: 14px Arial, Helvetica, sans-serif;
	z-index: 1000;
	background-color: cadetblue;
	text-align:left;
	margin: 0;
	padding: 0;
}



#menu_sito ul ul li a{
height: 30px;
display: block;
text-decoration:none;
text-align: left;
line-height: 30px;
color: #333;
background: none;
z-index: 1000;
padding-left:12px;
width: 188px;
}






#menu_sito ul li ul li a:hover{ /*sub menus hover style*/
background: #171717;
color: #f87a2b;
}

#menu_sito ul ul li a:hover{
background: maroon none;

}

#menu_sito ul ul li:hover ul li {
	float: left;
visibility:visible;
margin-left: 12px;
}

#menu_sito ul ul ul li {

visibility: hidden;
left:200px;
top:-40px;
background-color: black;
width: 200px;

}
#menu_sito ul ul ul li a{

margin:0;
height: 30px;
display: block;
text-decoration:none;
text-align: left;
color: #333;
background: none;
z-index: 1000;

}




#menu_sito ul ul ul li a:hover{
background: yellow;
}

Code (markup):

and the html code

<link href="css/menu_pette.css" rel="stylesheet" type="text/css" />


<div id="menu_sito">
  <ul>
  	<li><a href="#">Home</a></li>


      	
   
     
     <li><a href="#">Hotel</a>
       <ul>
		 <li><a href="#">Hotel oggi</a></li>
		 <li><a href="#">Il complesso</a></li>
		 <li><a href="#">Le camere</a>
         	<ul>
            	<li><a href="#">Camere standard</a></li>
                <li><a href="#">Suite</a></li>
                <li><a href="#">Camere dependance</a></li>
             </ul>
         </li>
       </ul>
     </li>
     <li><a href="#">Residence</a>
     	<ul>
        	<li><a href"#">Appartamento 4 posti letto</a></li>
            <li><a href"#">Appartamento marchesini</a></li>
            <li><a href"#">Appartamento dei Dogi</a></li>
        </ul>
     </li>
     
     
     <li><a href="itinerari/">Itinerari</a>
       <ul>
		 <li><a href="itinerari/venezia.php">Venezia</a>
           	<ul>
	 		    <li><a href="#">La citt&agrave;</a></li>
	 		    <li><a href="#">Le chiese</a></li>
	 		    <li><a href="#">Piazze e campi</a></li>
                <li><a href="#">I Palazzi</a></li>
                <li><a href="#">I musei</a></li>
                <li><a href="#">I ponti</a></li>
                <li><a href="#">Punti di interesse</a></li>
                <li><a href="#">Eventi</a></li>
			</ul>
         </li>
         <li><a href="#">Valle Averto</a>
        	<ul>
	 		    <li><a href="#">il WWF</a></li>
	 		    <li><a href="#">Informazioni utili</a></li>
			</ul>
         
         </li>
		 <li><a href="#">Riviera del Brenta</a>
			<ul>
	 		    <li><a href="#">La Riviera</a></li>
	 		    <li><a href="#">Eventi</a></li>
	 		    <li><a href="#">Le ville</a></li>
			</ul>
		 </li>
      <li><a href="#">Padova</a>
	   <ul>
	     <li><a href="#">La citt&agrave;</a></li>
	     <li><a href="#">Eventi</a></li>
	     </ul>
	 </li>
      <li><a href="#">Chioggia</a>
	   <ul>
	     <li><a href="#">La citt&agrave;</a></li>
	     <li><a href="#">Sottomarina, Isola Verde</a></li>
	     <li><a href="#">Eventi</a></li>
	   </ul>
	 </li>
     <li><a href="#">Verona</a>
	   <ul>
	     <li><a href="#">La citt&agrave;</a></li>
	   </ul>
	 </li>
     
     
      </ul>
    </li>
    
    <li><a href="#">Ristorante</a></li>
    <li><a href="#">Prezzi</a></li>
    <li><a href="#">Contatti</a></li>
    
    
  </ul>
</div>

PHP:

Where are the problems?
Thanks!

 

Try putting "width: 200px" and "height: 30px" in each selector id with an <li>. Inheritance could be an issue here so work backward from the third level to the first making a change and viewing the result. If no change, exclude that edit from your code and move up to the next level.

 

The code for this menu is quite strange and a bit dodgy, but you can seem to fix it by adding the following CSS:

#menu_sito ul ul ul { visibility: hidden; }

Code (markup):