Hola a todos..
Tengo este código que encontré en Internet hace un tiempo para hacer un menú vertical tipo acordeón.
Modifique para cargar un menu...
Código PHP:
<ul id="nav">
<?php
$sql_clasi = mysql_query(" SELECT id_clasi, nombre_clasi FROM tbl_clasificacion
WHERE tipo_clasi = '0' or tipo_clasi = '1' ORDER BY id_clasi ASC")
or die("Error al leer base de datos: ".mysql_error());
$NumClas = mysql_num_rows($sql_clasi);
for($i=0; $i<$NumClas; $i++){
$RowsClas = mysql_fetch_array($sql_clasi);
$IdClas = $RowsClas["id_clasi"];
$NombreClas = utf8_encode($RowsClas["nombre_clasi"]);
?>
<li>
<a href="#" class="sub" tabindex="1">
<img src="imagenes/punta_2.gif" />
<b style="font-size:10px"><?php echo $NombreClas;?></b>
</a>
<img src="imagenes/up.gif" alt="" />
<ul>
<?php
$sql_subclas = mysql_query("SELECT id_catclasi, nombre_catclasi FROM
tbl_cat_clasi WHERE id_clasi=".$IdClas." ORDER BY nombre_catclasi ASC")
or die("Error al leer base de datos: ".mysql_error());
$NumSubClas = mysql_num_rows($sql_subclas);
if($NumSubClas>0){
for($j=0; $j<$NumSubClas; $j++){
$RowsSubClas = mysql_fetch_array($sql_subclas);
$IdSubClas = $RowsSubClas["id_catclasi"];
$NombreSubClas = utf8_encode($RowsSubClas["nombre_catclasi"]);
?>
<li style="margin-left:15px;">
<a href="directorio-resultados?IdClas=<?php echo $IdClas;?>&IdSubClas=<?php echo $IdSubClas;?>">
<img src="imagenes/punta_2.gif" />
<?php echo $NombreSubClas;?>
</a>
</li>
<?php
} // for($j=0; $j<$NumSub; $j++)
}// if($NumSub>0)
?>
</ul>
</li>
<?php
}// for($i=0; $i<$NumCat; $i++)
?>
</ul>
Y el CSS para darle el diseño y función al menú..
Código CSS:
Ver original#nav {
border:2px solid grey;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-right:8px;
margin-top:auto;
}
#nav, #nav ul {
list-style:none;
padding:0;
}
#nav ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li {
margin:0;
padding:0;
list-style:none;
height:0;
overflow: hidden;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
#nav li a {
background-color:#FFFFFF;
color:#000;
display:block;
font-size:11px;
line-height:28px;
outline:0;
padding-left:0px;
text-decoration:none;
}
#nav li a + img {
cursor:pointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:160px;
}
/* Boton categorias */
#nav li a img {
border-width:0px;
height:13px;
line-height:28px;
margin-right:0px;
vertical-align:middle;
width:11px;
}
#nav li a:hover {
background-color:#bcbdc1;
}
#nav ul li a {
background-color:#FFF;
color:#000;
font-size:11px;
line-height:22px;
}
#nav ul li a:hover {
background-color:#ddd;
color:#444;
}
/* Boton subcategorias */
#nav ul li a img {
background: url("../images/punta_2.gif") no-repeat;
border-width:0px;
height:13px;
line-height:22px;
margin-right:0px;
vertical-align:middle;
width:11px;
}
#nav ul li:nth-child(odd) a img {
background:url("../images/punta_2.gif") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li{
height: 20px;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li {
margin-top:0;
}
#nav ul:hover li {
margin-top:0;
}
Esto me funciona..
Lo que quiero es que el sub-menu me aparezca sin bordes. Así:
Es esto posible?? no entiendo muy bien el css.
Muchas gracias de antemano..