No replies
pettedemon
pettedemon's picture
Offline
newbie
Last seen: 10 years 38 weeks ago
Timezone: GMT+2
Joined: 2010-08-18
Posts: 1
Points: 2

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

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

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

Where are the problems?
Thanks!