Menu drop down seguindo o site do Maujor

[marcosfj1 0]

Galera seguinte to tentando seguir o codigo do site: http://maujor.com/tutorial/ddownmenu.php

Mas nao estou conseguindo implantar no meu sistema, talvez seja ate um problema da geração do menu qu é dinamica com PHP mas queria que o pessoa desse uma olhada, pq de css nao sei nada, vou colocar como eu gero e menu pelo php e como fiz css

 

Geracao do menu:

$sql = "BUSCA DOS DEPARTAMENTOS CADASTRADOS";
$req = mysql_query($sql);

//
if (mysql_num_rows($req)) {

?>
   <ul class="semMargem" id="nav">
     <?

//
while ($cp = mysql_fetch_array($req)) {

	//
	$nome = $cp['nome'];
	if ($cp['id_produto_categoria'] == $_GET['categoria'])
		$nome = '<b>'.$cp['nome'].'</b>';

?>
    //MOSTRO TODOS OS DEPARTAMENTOS ENCONTRADOS
     <li><a class="categoria" href="?l=produto&categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li>

<?

//AO PASSAR O MOUSE O MENU DEVE APARECER
if ($cp['id_produto_categoria']) {

	//
	echo '<li><ul style="margin-bottom:5px;">';

	//
	$sql = "BUSCO TODAS AS MARCAS DOS PRODUTOS REFERENTES A AQUELE DEPARTAMENTO ";
	$req2 = mysql_query($sql);

	//
	while ($cp2 = mysql_fetch_array($req2)) {

		//
		$nome = $cp2['nome'];
		if ($cp2['id_produto_marca'] == $_GET['marca'])
			$nome = '<b>'.$cp2['nome'].'</b>';

?>
        //MOSTRO TODAS AS MARCAS ENCONTRADAS REFERENTES AQUELE DEPARTAMENTO
     	<li><a class="marca" style="color:#06C;" href="?l=produto&categoria=<?=$_GET['categoria'] ?>&marca=<?=$cp2['id_produto_marca'] ?>" title="<?=$cp2['nome'] ?>" ><?=$nome ?></a></li>
<? 

	}

	echo '</ul></li>';

}

 

Bom este é a geração do menu, e sim esta funcionando, aparece la o q eu quero, e qdo eu passo o mouse sobre o submenu aparece, mas nao fica fixo qdo eu mexo para chegar ate a marca ele sai...deem uma olhada no css que eu fiz para ver onde pode ser o erro, q esta causando isso

 

#menu_categoria ul {
margin: 0;
list-style: none;
}
#menu_categoria li {
font-size:11px;
display: block;
padding:2px;
}

#menu_categoria ul li {    
position: relative;     
}
#menu_categoria li ul {     
position: absolute;    
left: 149px;    
top: 0; 
display: none; 
}
#menu_categoria ul li a { 
display: block; 
text-decoration: none; 
color: #777; 
background: #fff; 
padding: 5px;  
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

#menu_categoria ul {     
margin: 0;    
padding: 0;   
list-style: none;    
width: 180px;   

}

#menu_categoria li:hover ul, li.over ul {      
display: block;     
}

#menu_categoria .categoria {
display: block;
padding: 0 0 0 10px;
background: url(../../imagem/marca_menu.gif) no-repeat left center;
text-decoration: none;
color:#333333;
font-size:11px;
}
#menu_categoria .ativo .categoria {
color:#000;
}
#menu_categoria .marca {
font-size:11px;
color:#666;
text-decoration:none;
padding-left:10px;
}
#menu_categoria a:hover {
font-size:11px;
color:#666;
text-decoration:underline;
padding-left:14px;
}

 

Valeu galera agradeco qualquer ajuda

[marcosfj1 0]

=========================================================================

Seguinte galera fiz alteraçoes aqui e ainda nao consegui chegar no 100% diria q to a uns 95% hehe...bom pra comecar eu mudei e agora o menu ao passar o mouse em cima do departamente ele mostra as marcas em baixo, e esta mostrando perfeitamente, qual o problema ta faltando um detalhe que vou mostrar com imagens

 

Reparem que tive q colocar o mouse um pouquinho abaixo do nome do departamento e isso nao ta certo tem q aparecer qdo estou com o mouse sobre ele

Uploaded with ImageShack.us

 

Mas se eu coloco o mouse certinho em cima do nome do departamento ele fica negrito, mas nao mostra as marcas

Uploaded with ImageShack.us

 

Isso q ta sendo o problema, por isso q acho q falta pouco para resolver....vou postar novamente meu codigo CSS para vcs analisarem se deixei passar algo:

 

#menu_categoria ul {
margin: 0;
padding: 0;  
list-style: none;    
width: 185px;	
}

#menu_categoria li { 
   font-size:11px; 
   display: block; 
   padding:2px;

} 

#menu_categoria ul li {    
position: relative;     
}
#menu_categoria li ul {     
position: relative;    
left: 10px;    
top: 0; 
display: none; 
}
#menu_categoria ul li a { 
display: block; 
text-decoration: none; 
color: #777; 
background: #fff; 
padding: 2px;  
}

#menu_categoria ul {     
margin: 0;    
padding: 0;   
list-style: none;    
width: 170px;   

}

#menu_categoria li:hover ul, li.over ul {      
display: block;     
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

#menu_categoria .categoria {
display: block;
padding: 0 0 0 9px;
background: url(../../imagem/marca_menu.gif) no-repeat left center;
text-decoration: none;
color:#333333;
font-size:11px;
}
#menu_categoria .ativo .categoria {
color:#000;
}
#menu_categoria .marca {
font-size:11px;
color:#666;
text-decoration:none;
padding-left:7px;
width: 105px; 
}
#menu_categoria a:hover { 
       font-size:11px; 
       color:#666; 
       text-decoration:underline; 
       font-weight: bold;

}

[marcosfj1 0]

Bom apesar de nao ter tido la mta ajuda aqui no forum, acabei conseguindo

 

Era no PHP havia um <li> a mais ai o CSS se confundia

 

Agora o problema para fechar o 100% esta que o menu de marcas q deveria ficar escondido e só aparecer quando colocasse o mouse em cima do departamento, já vem aberto no chrome e no firefox, enquanto q no IE ele vem certinho fechado, e qdo coloco o mouse em cima dele aparece

 

Alguem sabe me dizer como posso adptar este CSS para funcionar em todos:

 

#menu_categoria li { 
   font-size:12px; 
   display: block; 
   padding: 0px;

}
#menu_categoria ul li { 
position: relative;   
}

#menu_categoria li ul  {     
position: relative;    
left: 5px;    
display: none; 
padding:1px; 
}
#menu_categoria ul li{ 
display: block; 
text-decoration: none; 
color: #777; 
background: #fff; 
padding:4px; 	 
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

#menu_categoria ul {     
margin: 0;    
padding: 0;   
list-style: none;    
width: 185px; 
border-bottom: 1px solid #ccc;  

}


#menu_categoria li:hover ul, li.over ul { 
display: block; 
}

#menu_categoria .categoria {
display: block;
padding: 0 0 0 9px;
background: url(../../imagem/marca_menu.gif) no-repeat left center;
text-decoration: none;
color:#333333;
font-size:12px;
}
#menu_categoria .ativo .categoria {
color:#000;
}
#menu_categoria .marca {
font-size:11px;
color:#666;
text-decoration:none;
padding-left:7px;
width: 143px; 
}

#menu_categoria a:hover { 
       font-size:12px; 
       color:#666; 
       text-decoration:underline; 
       font-weight: bold;

}

 

================================

Este é o JavaScript que o Maujor recomendou no site

 

<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;	
</script>

 

 

 

Agradeco desde já

 

Pior que todas as pesquisas que eu faço é sempre o contrario....todo mundo querendo fazer funcionar no IE e esta funcionando nos outros hehe...mas comigo claro tem q ser ao contrario....nao consigo nem material de pesquisa para saber onde esta meu erro

 

Se nao é o povo do forum eu to perdido

 

valeu