Colocar menu drop down em sistema PHP

[biulchi 0]

bOM DIA

 

Bom pessoal seguinte tneho um sistema de catalago de produtos e funciona certim ! o que acon tece que meu cliente como usa muitas categoria sd e subcategorias me pediu para ciolocar menus drop down,bom o que ocorre eu segui varios tutoriais e nada do negocio funcionar vou postar o codigo do menu e a folha de estilos se alguem poder me ajudar a fazer esse menu ficarei grato

 

aqui o codigo do

menu_categorias.php

<script type="text/javascript">
function horizontal() {

  var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");

  for (var i=0; i< navItems.length; i++) {
     if(navItems[i].className == "submenu")
     {
        if(navItems[i].getElementsByTagName('ul')[0] != null)
        {
           navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
           navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
        }
     }
  }

}

</script>
<?
$sqlCat = "SELECT * FROM categorias ORDER BY ordenacao ASC, id DESC";
$resultadoCat = mysql_query($sqlCat)or die ("Erro:: ".mysql_error());
while ($linhaCat=mysql_fetch_array($resultadoCat))
{
	$idCat = $linhaCat["id"];
	$descricaoCat = $linhaCat["descricao"];
?>
<div class="div_titulos-cat"><a class="titulos-cat" href="categoria.php?idCategoria=<? echo $idCat; ?>"><? echo $descricaoCat; ?></a></div>
<ul class="menu_subcategorias">
<?

	$sqlS = "SELECT * FROM subcategorias WHERE idCategoria = '$idCat' ORDER BY ordenacao ASC, id DESC";
	$resultadoS = mysql_query($sqlS)or die ("Erro:: ".mysql_error());
	while ($linhaS=mysql_fetch_array($resultadoS))
		{
			$idS = $linhaS["id"];
			$descricaoS = $linhaS["descricao"];
?>
		<li><a href="categoria.php?idCategoria=<? echo $idCat; ?>&idSubCategoria=<? echo $idS; ?>"><? echo $descricaoS; ?></a></li>
<?
		}
?>
</ul>

<?
	}
?>

 

 

 

aqui a folha de estilos

 

@charset "utf-8";

/* CSS Document */









.fundo{

width:100%;

text-align:left;

margin:0 auto;

}



#tudo {

width:1002px;

text-align:left;

margin:0 auto;

}





.separador-horizontal {

clear:both;

   height:20px;

   font-size:1px;

   line-height:5px;

}



/*=====================================*/



.campos {

font-size:11px;

color:#666;

border:1px solid #ddd;

padding:1px 3px;

}



.campos:focus, .campos:hover {

border:1px solid #bbb;

}



/*=====================================*/



.topo{

width:1002px;

height:200px;

clear:both;

text-align:left;

}



.conteudo{

width:950px;

clear:both;

padding:0 26px;

}







/*=====================================*/



.categorias{

width:190px;

float:left;

}



.menu-categorias{



width:190px;

float:left;

}



.menu-categorias2{


width:190px;

float:left;

}



.menu-lateral{

padding:5px;

float:left;

}



.div_titulos-cat{


width:190px;
height:15px;
padding:0 10px;
clear:both;
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;

}



/*---------------------------------*/



ul.menu_subcategorias {
   display: block; 
   margin: 0;
padding: 0;
list-style: none;
width: 190 px;




}



ul.menu_subcategorias li{

display: block; 
position: absolute;
left: 190px;
top: 0;
display: none;


}



ul.menu_subcategorias li a{



 font: 13px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif bold;


text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
display:none;

}



ul.menu_subcategorias li a:hover{
   display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;

}


}  

.drop-menu {  
   display: block;  
   margin-right: auto;  
   margin-left: auto;  
   text-align: left;  
   padding: 10px 10px;  
   font-size: 22px;  
   height: 25px;  
   max-height: 25px;  
   width: 400px;  
   background: #fff;  
   cursor: pointer;  
   border: 1px solid #f6f0e4;  
}  

   .plus {  
       display: inline-block;  
       -webkit-transition: .3s ease-in-out;  
       -moz-transition: .3s ease-in-out;  
       -o-transition: .3s ease-in-out;  
   }  

   .drop-menu:hover {  
       border: 1px solid #fff;  
   }  

   .drop-menu:hover .sub-menu {  
       display: inline-block;  
   }  

   .drop-menu:hover .plus {  
       -webkit-transform: rotate(45deg);  
       -moz-transform: rotate(45deg);  
       -o-transform: rotate(45deg);  
   }  

   .sub-menu {  
       display: none;  
       width: 400px;  
       background: #fff;  
       padding: 10px 10px;  
       margin-left: -11px;  
       margin-top: 10px;  
       border: 1px solid #fff;  
       -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);  
       -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);  
       box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);  
   }  

   .sub-menu li {  
       list-style-type: none;  
       display: block;  
       border-bottom: 1px dotted #eaeaea;  
       font-size: 19px;  
       height: 22px;  
       padding: 8px 0;  
   }  

       .sub-menu li img {  
           margin-right: .5em;  
       }  

   .sub-menu li:hover {  
       border-bottom: 1px dotted #bababa;  
   }  

/*=========================================*/





.conteudo-navegacao{

width:745px;

float:left;

padding:0 0 0 15px;

}







/*=====================================*/

.titulos-cat{

font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#999999;

font-weight:bold;

text-decoration:none;

text-transform:uppercase;

}



.titulos-produtos{

font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#000000;

font-weight:bold;

text-transform:uppercase;
text-decoration:inherit;

}



.descricao-produtos{

font: 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#000000;

text-decoration:none;

}



.texto_preco{

font: 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-weight:bold;

text-decoration: none;

color:#CE0000;

}



.texto_preco_riscado{

font: 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-weight:bold;

text-decoration: line-through;

color:#CE0000;

}





.titulos-internos{

font: 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color:#000000;

font-weight:bold;

text-decoration:none;

text-transform:uppercase;

}



/*==============================================*/



.rodape{

width:1002px;

height:65px;

clear:both;

text-align:center;

background:url(../imagens/fundo_rodape.jpg);

padding:10px 0 0 0;

}



.rodape_esq{

float:left;

width:100px;

}



.rodape_meio{

float:left;

width:783px;

}



.rodape_dir{

float:left;

width:100px;

text-align:center;

padding:10px 0 0 0;

}



.endereco_esq{

width:370px;

text-align:right;

border-right:#FFFFFF 1px solid;

padding:0 10px;

float:left;

}



.endereco_meio{

width:2px;

text-align:right;

float:left;

}



.endereco_dir{

width:370px;

text-align:left;

border-left:#FFFFFF 1px solid;

padding:0 10px;

float:left;

}



/*=======================================================*/







.formu_c {

border:#CCCCCC 1px solid;

font: 11px Arial, Helvetica, sans-serif;

width:450px;

padding:5px 0px 0px 50px;

margin:10px;

overflow:hidden;

}





input#nomeC, input#emailC, input#endereco, input#cidade, input#fone {

width:270px;

border:#CCC 1px solid;

}



input#cep {

width:100px;

border:#CCC 1px solid;

}



select#cidade{

width:230px;

border:#CCC 1px solid;

}



textarea#recado {

width:270px;

height:100px;

border:#eee 2px solid;

}



.formulario_c dd {margin:0.5em; padding:0px 2px 0px 2px;text-align:left;}

.formulario_c dt {margin:0.5em; padding:5px 2px 0px 2px;text-align:left;}

 

 

Se alguem poder me ajudar a intergar isso ai ! vlww

[Henrique Barcelos 290]

http://forum.imasters.com.br/index.php?/topic/340960-menu-drop-down-fluido-3-niveis-imagens/

 

Tá prontinho, é só adaptar...