[Resolvido] Efeito no Menu

[Dexter Morgan 7]

Bom dia, queria colocar um efeito no submenu ao passar o mouse, seria o efeito accordion

 

aqui segue o link do site para vocês verem:

 

http://www.avencedoracalcados.com.br/

 

ao passar o mouse ele mostra normal, mas quero colocar esse efeito, ja tentei mas sem sucesso segue o css:

 

menu.css

/**************************************************************************************************/
/* Title: ..::A Vencedora Calcados::.. Tudo Pelo seus Pes */
/* Author: ..::Leonardo Tavares dos Reis::.. */
/* Copyright: © A Vencedora Calcados.com.br */
/**************************************************************************************************/

/**************************************************************************************************/
	/* MENU */
/**************************************************************************************************/

#menu-bg{
display:inline-block;
width:100%;
position:relative;
clear:both;
}

#menu-background{
width:980px;
margin:0 auto;
padding-left:7px;
padding-right:7px;
}

#menu-content{
height:34px;
display:block;
border-bottom:6px solid #b21626;
}

#menu .active a{
background:url(../img/menu_hover.png) left top repeat-x;
color:#ffffff;
-moz-border-radius:6px 6px 0 0;
-khtml-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
border:0px;
outline:0;
-moz-box-shadow:0 0 3px #b21626;
-webkit-box-shadow:0 0 3px #b21626;
box-shadow:0 0 3px #b21626;
}

#menu .menu{
margin:0 2px 0 0;
float:left;
text-transform:uppercase;
color:#606060;
font-weight:bold;
font-size:11px;
background:url(../img/menu.png) left top repeat-x;
-moz-border-radius:6px 6px 0 0;
-khtml-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
}

#menu .menu:hover,
#menu .menu:focus{
background:url(../img/menu_hover.png) left top repeat-x;
color:#ffffff;
-moz-border-radius:6px 6px 0 0;
-khtml-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
border:0px;
outline:0;
-moz-box-shadow:0 0 3px #b21626;
-webkit-box-shadow:0 0 3px #b21626;
box-shadow:0 0 3px #b21626;
}

#menu{
width:980px;
margin:0 auto;
font-size:12px;
font-family:helvetica;
display:block;
}

/**************************************************************************************************/
	/* SUB-MENU */
/**************************************************************************************************/

#menu .sub-menu{
background:url() #b21626 left top repeat-x;
border-bottom:1px solid #a62422;
}

#menu .sub-menu:hover,
#menu .sub-menu:focus{
background:url(../img/menu.png) left top repeat-x;
}

#menu .sub-menu-radius{
background:url() #b21626 left bottom repeat-x;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}

#menu .sub-menu-radius:hover,
#menu .sub-menu-radius:focus{
background:url(../img/menu.png) left bottom repeat-x;
-moz-border-radius:0 0 6px 6px;
-khtml-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
}

#menu li ul a{
width:130px;
text-transform:uppercase;
color:#ffffff;
font-weight:bold;
font-size:11px;
}

#menu li ul a:hover{
width:130px;
text-transform:uppercase;
color:#606060;
font-weight:bold;
font-size:11px;
}

#menu li{
float:left;
position:relative;
}

#menu li a{
display:block;
float:left;
height:34px;
padding:0px 14px;
line-height:34px;
text-decoration:none;
}

#menu li ul{
display:none;
position:absolute;
top:34px;
left:0;
}

#menu li:hover ul.sub-menu-content,
#menu li:focus ul.sub-menu-content{
margin:0px;
padding:0px;
border-top:6px solid #b21626;
display:block;
z-index:99;
}

 

e o menu include:

 

menu.php

 

<div id="menu-bg">
<div id="menu-content">
<div id="menu-background">

<?php $active[$menu] = "active"; ?>

<ul id="menu">

<li><b class="<?php echo $active[0] ?>"><a class="menu <?php echo $active[0] ?>" href="index.php" style="outline:0;">Home</a></b></li>

<li><b class="<?php echo $active[6] ?>"><a class="menu <?php echo $active[6] ?>" href="business.php" style="outline:0;">Empresa</a></b></li>

<li><b class="<?php echo $active[1] ?>"><a class="menu <?php echo $active[1] ?>" href="#" style="outline:0;">Masculino</a></b>
<ul class="sub-menu-content">
<li class="sub-menu"><a href="gallery.php?id_categoria=1&id_subcategoria=101" style="outline:0;">Sapatos</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=1&id_subcategoria=102" style="outline:0;">Sapatênis</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=1&id_subcategoria=103" style="outline:0;">Sandálias</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=1&id_subcategoria=104" style="outline:0;">Coturnos</a></li>
<li class="sub-menu-radius"><a href="gallery.php?id_categoria=1&id_subcategoria=105" style="outline:0;">Botas</a></li>
</ul>
</li>

<li><b class="<?php echo $active[2] ?>"><a class="menu <?php echo $active[2] ?>" href="#" style="outline:0;">Feminino</a></b>
<ul class="sub-menu-content">
<li class="sub-menu"><a href="gallery.php?id_categoria=2&id_subcategoria=201" style="outline:0;">Sapatos</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=2&id_subcategoria=202" style="outline:0;">Sandálias</a></li>
<li class="sub-menu-radius"><a href="gallery.php?id_categoria=2&id_subcategoria=204" style="outline:0;">Botas</a></li>
</ul>
</li>

<li><b class="<?php echo $active[3] ?>"><a class="menu <?php echo $active[3] ?>" href="#" style="outline:0;">Esportivo</a></b>
<ul class="sub-menu-content">
<li class="sub-menu"><a href="gallery.php?id_categoria=3&id_subcategoria=301" style="outline:0;">Tênis Masculino</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=3&id_subcategoria=302" style="outline:0;">Tênis Feminino</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=3&id_subcategoria=303" style="outline:0;">Chuteiras</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=3&id_subcategoria=304" style="outline:0;">Society</a></li>
<li class="sub-menu-radius"><a href="gallery.php?id_categoria=3&id_subcategoria=305" style="outline:0;">Indoor</a></li>
</ul>
</li>

<li><b class="<?php echo $active[4] ?>"><a class="menu <?php echo $active[4] ?>" href="#" style="outline:0;">Infantil</a></b>
<ul class="sub-menu-content">
<li class="sub-menu"><a href="gallery.php?id_categoria=4&id_subcategoria=401" style="outline:0;">Tênis Menino</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=4&id_subcategoria=402" style="outline:0;">Tênis Menina</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=4&id_subcategoria=403" style="outline:0;">Sapatos Menino</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=4&id_subcategoria=404" style="outline:0;">Sapatos Menina</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=4&id_subcategoria=405" style="outline:0;">Sandálias Menino</a></li>
<li class="sub-menu-radius"><a href="gallery.php?id_categoria=4&id_subcategoria=406" style="outline:0;">Sandálias Menina</a></li>
</ul>
</li>

<li><b class="<?php echo $active[5] ?>"><a class="menu <?php echo $active[5] ?>" href="#" style="outline:0;">Acessórios</a></b>
<ul class="sub-menu-content">
<li class="sub-menu"><a href="gallery.php?id_categoria=5&id_subcategoria=501" style="outline:0;">Bolsas</a></li>
<li class="sub-menu"><a href="gallery.php?id_categoria=5&id_subcategoria=502" style="outline:0;">Cintos</a></li>
<li class="sub-menu-radius"><a href="gallery.php?id_categoria=5&id_subcategoria=503" style="outline:0;">Diversos</a></li>
</ul>
</li>

<li><b class="<?php echo $active[7] ?>"><a class="menu <?php echo $active[7] ?>" href="feed.php" style="outline:0;">Feed</a></b></li>

<li><b class="<?php echo $active[8] ?>"><a class="menu <?php echo $active[8] ?>" href="videos.php" style="outline:0;">Vídeos</a></b></li>

<li><b class="<?php echo $active[9] ?>"><a class="menu <?php echo $active[9] ?>" href="location.php" style="outline:0;">Localização</a></b></li>

<li><b class="<?php echo $active[10] ?>"><a class="menu <?php echo $active[10] ?>" href="contact.php" style="outline:0;">Contato</a></b></li>

</ul>

</div>
</div>
</div>

 

alguém sabe uma forma facil de implantar nesse código? vlw

[Dexter Morgan 7]

está RESOLVIDO :thumbsup: