[Resolvido] Menu horizontal dropdown com erro

[wertycs 0]

Boa noite pessoal!! Sou novo no forum e iniciante no CSS. Estou criando um menu horizontal dropdown com três níveis, porém a última <ul> não está sumindo, ele sempre aparece quando passamos o mouse ainda no nível dois. Qual seria meu erro no código?

 

Segue:

 

HTML

<link href="menu.css" type="text/css" rel="stylesheet" />
   <div id="navbar">
 <ul>

   <li id="current"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a>
	<ul>
	<li><a href="index.html">Teste 1</a></li>
	<li><a href="index.html">Teste teste</a></li>
	<li><a href="index.html">teste 2</a></li>
	</ul>
</li> 	
<li><a href="index.html">Exemplo</a></li>
<li><a href="index.html">Mural</a>
	<ul>
	<li><a href="index.html">Recados</a></li>
	<li><a href="index.html">Fotos</a>
		<ul>
		<li><a href="index.html">Fotos 1</a></li>
		<li><a href="index.html">Fotos 2</a></li>
		<li><a href="index.html">Fotos 3</a></li>
		</ul>	
	</li>
	</ul></li>
<li><a href="index.html">Downloads</a>
<ul>
	<li><a href="index.html">Down 1</a></li>
	<li><a href="index.html">Down 2</a></li>
	<li><a href="index.html">Down 3</a></li>
	</ul>
</li>
<li><a href="index.html">Contato</a></li>
<li><a href="biblia_online.html">Produto</a></li>
 </ul>

</div>

 

 

CSS

 

#navbar {
height: 50px;
background:#000;
clear: both;
position:relative;
margin-top:72px;
z-index:1;

}


#navbar ul {
margin-left: 206px; 

}

#navbar ul li {
float: left;
list-style: none;		
height: 25px;
margin-top:10px;
padding-left:3px;
position:relative;

}

#navbar ul li a {
display: block;
text-decoration: none;	
padding: 5px 15px;
color: #fff;	
font-weight: bold;
height: 20px;
color:#f4f4f4;

}

#navbar ul li a:hover {
color: #fbff8e;	
background:#fff;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
height:18px;

}


#navbar ul li#current a {
color: #333;
background:#f4f4f4;	
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
height:18px;

}

#navbar ul li#current a:hover {
color: #fbff8e;
background-color: #013567;

}


#navbar ul li ul {
display:none;
position:absolute;
top:30px;
left:0;

}

#navbar li:hover ul {
display:block;
left:-200px;
top:28px;

}

#navbar li ul li a{
width:120px;

}

#navbar ul li:hover ul{
width:170px;
background:#252525;
font-size:12px;
padding-bottom:10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;

}

#navbar ul li ul li ul {
display:none;
position:absolute;

}


#navbar ul li ul li:hover ul{
display:block;
width:170px;
background:#252525;
font-size:12px;
padding-bottom:10px;
left:-53px;
top:-5px;
border:1px solid #505050;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;

}

[allex_carvalho 124]

Bom dia.

 

Faça as seguintes alterações:

 

#navbar ul li ul li ul {
display:none !important; /*força sumir o ul*/
position:absolute;
}

#navbar ul li ul li:hover ul{
display:block !important; /*força aparecer o ul*/
width:170px;
background:#252525;
font-size:12px;
padding-bottom:10px;
left:-53px;
top:-5px;
border:1px solid #505050;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

[wertycs 0]

Bom dia.

 

Faça as seguintes alterações:

 

#navbar ul li ul li ul {
display:none !important; /*força sumir o ul*/
position:absolute;
}

#navbar ul li ul li:hover ul{
display:block !important; /*força aparecer o ul*/
width:170px;
background:#252525;
font-size:12px;
padding-bottom:10px;
left:-53px;
top:-5px;
border:1px solid #505050;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

 

 

Obrigado Allex, funcionou perfeitamente.

 

RESOLVIDO.