Menu DropDown com defeito

[Deregudegu 1]

Bom eu estava fazendo uns menus para ver qual ficar ria melhor no meu site, ele funciona até certa parte.

Como assim?

Ele ficou uma beleza, quando eu seleciono a li da barra aparece o menu, mas quando movo o mouse até a li que apareceu ela some.

 

Códigos:

 

HTML:

 

       <div id="submenubox">
		<ul id="submenu">
	    	<li><a href="#">Desenvolvimento</a>
				<ul>
					<li><a href="" alt="" title=""> Dreamweaver </a></li>
				</ul>
			</li>
			<li><a href="#">Programação</a>
				<ul>
					<li><a href="" alt="" title=""> PHP </a></li>
				</ul>
			</li>		
			<li><a href="#">Criação</a>
				<ul>
					<li><a class="" href="" alt="" title=""> Fireworks </a></li>
				</ul>
			</li>
			<li><a href="#">Teste</a>
				<ul>
					<li><a href="" alt="" title="">Teste</a></li>
				</ul>
			</li>			
			<li><a href="#">Teste</a>			
				<ul>
					<li><a href="" alt="" title="">Teste</a></li>
				</ul>
           	</li>			 			
			<li><a href="#" title="">Teste</a>
				<ul>
					<li><a href="" alt="" title="">Teste</a></li>
				</ul>
           	</li>
			<li><a href="#" title="">Teste</a>
				<ul>
					<li><a href="" alt="" title="">Teste</a></li>
				</ul>
           	</li> 
	    </ul>
	</div><!--submenubox-->

 

Css:

/*SubMenu*/
#header #submenubox{
height:32px;
max-height:32px;
min-width:32px;
text-align:left;
font:15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#069;
width:1000px;
font-weight:bold;
float:left;
margin:0;
background:url(/css/imgs/bg_menu_top.jpg) repeat;
border-top:1px solid #999;
border-bottom:1px solid #999;
   clear:both;
   height:60px;
}
ul#submenu li{
  position:relative;
  float:left;
  margin-top:-2px;
}

ul#submenu li a{
   display:block;
   float:left;
margin-top:2px;
   padding:0 15px;
   height:32px;
   line-height:25px;
background:url(/css/imgs/bg_menu_top.jpg) repeat;
   color:#FFF;
   text-decoration:none;
}
ul#submenu li a:hover{
display:block;
background:url(/css/imgs/bg_menu_bottom.jpg) repeat;
}
ul#submenu li ul{
   display:none;
   position:absolute;
   top:35px;
   left:0;
   z-index:99;
}

ul#submenu li:hover ul{
   display:block;
}

ul#submenu li ul li a{
   width:120px;
background:#77B603;
display:block;
   clear:both;
}

ul#submenu li ul li{
   float:none;
   clear:both;
}

ul#submenu li ul li a{float:none;}

 

Alguém sabe o que eu fiz de errado?

[Sérgio Haubman 2]

Oi amigo, o evento esta na li:hover, mas assim q o mouse passa para a ul q esta com position absolute a li perde o hover.

 

Uma alternativa é quando fizer hover na li você pode colocar uma classe nela por exemplo ativo e quando sai do hover você retira a classe utilizando javascript.

 

ex:

 

.li.ativo ul {display:block;}

 

Espero ter ajudado

 

Att

Sergio

[Evandro Oliveira 331]

posicione li ul como relative e não absolute