Problema com menu dinamico

[Ren_WEB 0]

Boa tarde!

 

Estou com um problema urgente... criei um menu dinamico expandible com Item e sub item..ultilizando PHP +MYSQL JAVA e CSS!Porem estou com um problema quando crio o segundo sub item.. ele fica visivel ao inves de ficar oculto.. alguem pode me ajudar!?

 

Por favor segunda vez que posto aqui!!!

 

Segue o Codigo -MENU.PHP

 

<?php require_once('Connections/conect.php'); ?>
<?php
mysql_select_db($database_conect, $conect);
$query_master1posicao = "SELECT * FROM posicao ORDER BY nomeposicao ASC";
$master1posicao = mysql_query($query_master1posicao, $conect) or die(mysql_error());
$row_master1posicao = mysql_fetch_assoc($master1posicao);
$totalRows_master1posicao = mysql_num_rows($master1posicao);

mysql_select_db($database_conect, $conect);
$query_detail2menu = "SELECT * FROM menu WHERE posicao = '123456789' ORDER BY nome ASC";
$detail2menu = mysql_query($query_detail2menu, $conect) or die(mysql_error());
$row_detail2menu = mysql_fetch_assoc($detail2menu);
$totalRows_detail2menu = mysql_num_rows($detail2menu);

$colname_conteudo = "-1";
if (isset($_GET['id_menu'])) {
 $colname_conteudo = (get_magic_quotes_gpc()) ? $_GET['id_menu'] : addslashes($_GET['id_menu']);
}
mysql_select_db($database_conect, $conect);
$query_conteudo = sprintf("SELECT * FROM conteudo WHERE id_menu = %s", $colname_conteudo);
$conteudo = mysql_query($query_conteudo, $conect) or die(mysql_error());
$row_conteudo = mysql_fetch_assoc($conteudo);
$totalRows_conteudo = mysql_num_rows($conteudo);
?>

<script src="includes/cssmenus2/js/cssmenus.js" type="text/javascript"></script>
<style type="text/css">
<!--
#absLayer1 {
position:absolute;
width:100%;
z-index:1;
}
.anular {
clear: both;
}

-->
</style>

<link href="includes/cssmenus2/skins/arktic_green/expandable.css" rel="stylesheet" type="text/css" />
<div id="cssMenu1" class="expandable">
 <ul class="arktic_green">
   <li> <a href="#" title="Quem Somos">Quem Somos</a>
       <ul>
         <li> <a href="empresa.php" title="Apresentação">Apresentação</a> </li>
         <li> <a href="galeria.php" title="Estrutura">Estrutura</a> </li>
	  <li><a href="clientes.php" title="Clientes">Clientes</a></li>
         <li> <a href="localiza.phpw" title="Localização">Localização</a> </li>
     </ul>
   </li>
   <li> <a href="#" title="Contato">Contato</a>
       <ul>
         <li> <a href="#" title="Duvidas Frequentes">Duvidas Frequentes</a> </li>
         <li> <a href="#" title="Trabalhe Conosco">Trabalhe Conosco</a> </li>
     </ul>
   </li>
   <?php do { ?>
     <li> <a href="#" title="1"><?php echo $row_master1posicao['nomeposicao']; ?></a>
         <?php
 if ($totalRows_master1posicao>0) {
   $nested_query_detail2menu = str_replace("123456789", $row_master1posicao['nomeposicao'], $query_detail2menu);
   mysql_select_db($database_conect);
   $detail2menu = mysql_query($nested_query_detail2menu, $conect) or die(mysql_error());
   $row_detail2menu = mysql_fetch_assoc($detail2menu);
   $totalRows_detail2menu = mysql_num_rows($detail2menu);
   $nested_sw = false;
   if (isset($row_detail2menu) && is_array($row_detail2menu)) {
     do { //Nested repeat
?>
         <ul>
           <li> <a href="result.php?id_menu=<?php echo $row_detail2menu['id_menu']; ?>"><?php echo $row_detail2menu['nome']; ?></a> </li>
       </ul>
     </li>
     <?php
     } while ($row_detail2menu = mysql_fetch_assoc($detail2menu)); //Nested move next
   }
 }
?>
       <?php } while ($row_master1posicao = mysql_fetch_assoc($master1posicao)); ?>
 </ul>
 <br class="anular"/>
 <script type="text/javascript">
<!--
   var obj_cssMenu1 = new CSSMenu("cssMenu1");
   obj_cssMenu1.setHighliteCurrent(true);
   obj_cssMenu1.show();
  //-->
 </script>
</div>

<?php
mysql_free_result($master1posicao);

mysql_free_result($detail2menu);

mysql_free_result($conteudo);
?>

 

CSS:

/*************************************************************************
* This is the SKIN style definition for the CSS menu.                    *
* Feel free to customize this section.                                   *
*************************************************************************/

/*
* Menu container settings
* Applies to the first level menu container
*/
.arktic_green {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
	font-weight: bold;
border: solid 1px #afafaf;
}

/*
* Menu container settings
* Applies to second (or more) level menu containers
*/
.arktic_green ul {
font-weight: normal;
}

/*
* Menu items settings
* Applies to all menu items in all menu containers
*/
.arktic_green li {
background-image: url(img/bgtop_v.gif);
background-repeat: repeat-y;
background-color: #CECECE;
border-bottom: 1px solid white;
	width: 200px;
}

/*
* Menu items settings
* Applies to second (or more) level menu items
*/
.arktic_green ul li {
background-image: url(img/bg.gif);
background-color: #FEFEFE;
}

/*
* Menu link settings
* Applies to links that are to be found within the menu items, no matter the menu level
*/
.arktic_green a {
text-decoration: none;
line-height: 25px;
color: #555555;
padding: 1px 2px 1px 21px;
border-left	: solid 2px #608A48;
cursor: pointer;
}

/*
* Menu link settings
* Applies to links located in the second (or more) level menu items
*/
.arktic_green ul a {
	border: none;
}


/*****************************************************************************
* In this section, we will define what happens when a menu item is selected  *
*****************************************************************************/

/*
* Selected menu item
* Applies to selected menu items in all menu containers
*/
.arktic_green li.selected {
}

/*
* Selected menu item
* Applies to second (or more) level selected menu items
*/
.arktic_green ul li.selected {
background-image: url(img/bg_sel.gif);
}

/*
* Selected links
* Applies to selected links in all menu items
*/
.arktic_green a.selected {
color: #000000;
border-left-color: #74A757;
}

/*
* Selected links
* Applies to selected links located in the second (or more) level menu items
*/
.arktic_green ul a.selected {
border-left-color: #ffffff;
}


/***************************************************************************
* In this section, we will define what happens when mouse-overing an item  *
***************************************************************************/

/*
* Mouse over on menu items
* Applies to all menu items in all menu containers
*/
.arktic_green li.hover {
background-image: none !important;
background-color: #6A914C;
}

/*
* Mouse over on menu items
* Applies to second (or more) level menu items
*/
.arktic_green ul li.hover {
}

/*
* Mouse over on links
* Applies to all links in all menu items
*/
.arktic_green a.hover {
color: #ffffff !important;
border-left-color: #AECC9D;
}

/*
* Mouse over on links
* Applies to links located in the second (or more) level menu items
*/
.arktic_green ul a.hover {
}


/******************************************************************************
* In this section, we will define the menu arrows behavior                    *
* An arrow is inserted next to the menu item when the menu item has sub-menus *
******************************************************************************/

/* 
* Define the arrow
* Applies to all menu items that have sub-menus
*/
.arktic_green .arrow {
background-image: url(img/arrow_right_color.gif);
background-repeat: no-repeat;
background-position: 3px center;
}

/* 
* Define the arrow
* Applies to all menu items that have sub-menus located in the second (or more) level
*/
.arktic_green .hover ul .arrow,
.arktic_green ul .arrow {
background-image: url(img/sarrow_right_dark.gif);
background-repeat: no-repeat;
background-position: right center;
}

/* 
* Define the arrow on mouse over
* Applies to all menu items that have sub-menus on mouse over
*/
.arktic_green .hover .arrow {
background-image: url(img/arrow_right_light.gif);
}

/* 
* Define the arrow on mouse over
* Applies to all menu items that have sub-menus located in the second (or more) level on mouse over
*/
.arktic_green ul .hover .arrow {
background-image: url(img/sarrow_right_light.gif);
}
/*************************************************************************
* This is the LAYOUT style definition for the CSS menu                   *
* DO NOT alter this section, unless you know what you're doing           *
*************************************************************************/
div.expandable {
clear: both;
}
div.expandable br {
clear: both;
}
div.expandable ul {
margin: 0px;
padding: 0px;
display: block;
float: left;
clear: both;
}
div.expandable li {
list-style-type: none;
display: block;
float: left;
clear: both;
text-align: left;
   position: relative;
}
div.expandable li img {
border: none;
}
div.expandable a {
clear: both;
float: none;
display: block;
margin: 0px;
}
div.expandable ul li ul {
position: static;
visibility: visible;
display: block;
clear: both;
margin: 0px;
margin-top: -5000px;
}
div.expandable ul li ul li ul {
display: none;
}
div.expandable ul li ul li {
clear: both;

}
div.expandable ul li ul li a {
clear: both;
}
.hasImg,
.hasImg a {
padding: 0px !important;
margin:	0px	!important;
border:	none !important;
outline: none !important;
background:	transparent !important;
width: auto !important;
}

 

 

LINK MENU

 

Obrigado

[Eliseu M. 2]

Qual navegador você está usando? Aqui, só um item do menu "Empresa" que ficou aparecendo, mas por erro de fechamento de TAG. Impressionantemente, no Internet Explorer o menu ficou melhor que no Chrome o.O O único problema no IE foi a omissão de um item do menu "Empresa", com texto "aa".

 

Eu não recomendo usar JS puro para fazer esse tipo de menu. É muito mais fácil com JQuery, você economiza tempo e código.

 

Dê uma olhada em JQuery Accordion:

 

http://www.andafter.org/blogs/odesenvolvedor/publicacoes/menu-accordion-em-jquery-sem-plugin-_756.html

http://www.pinceladasdaweb.com.br/blog/2009/06/15/menu-accordion-com-jquery/

http://www.brunomacaco.com.br/jquery-accordion

 

Falou!