Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/07/2014, 08:21
Avatar de Beuses
Beuses
 
Fecha de Ingreso: marzo-2009
Ubicación: Maracaibo
Mensajes: 132
Antigüedad: 15 años, 9 meses
Puntos: 5
Pregunta Sub-menú sin borde

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
  1. #nav {
  2.     border:2px solid grey;
  3.     border-radius:5px;
  4.     -moz-border-radius:5px;
  5.     -webkit-border-radius:5px;
  6.     margin-right:8px;
  7.     margin-top:auto;
  8. }
  9. #nav, #nav ul {
  10.     list-style:none;
  11.     padding:0;
  12. }
  13. #nav ul {
  14.     position:relative;
  15.     z-index:-1;
  16. }
  17. #nav li {
  18.     position:relative;
  19.     z-index:100;
  20. }
  21. #nav ul li {
  22.     margin:0;
  23.     padding:0;
  24.     list-style:none;
  25.     height:0;
  26.     overflow: hidden;
  27.     transition:1s;
  28.     -moz-transition:1s;
  29.     -webkit-transition:1s;
  30. }
  31. #nav li a {
  32.     background-color:#FFFFFF;
  33.     color:#000;
  34.     display:block;
  35.     font-size:11px;
  36.     line-height:28px;
  37.     outline:0;
  38.     padding-left:0px;
  39.     text-decoration:none;
  40. }
  41. #nav li a + img {
  42.     cursor:pointer;
  43.     display:none;
  44.     height:28px;
  45.     left:0;
  46.     position:absolute;
  47.     top:0;
  48.     width:160px;
  49. }
  50. /* Boton categorias */
  51. #nav li a img {
  52.     border-width:0px;
  53.     height:13px;
  54.     line-height:28px;
  55.     margin-right:0px;
  56.     vertical-align:middle;
  57.     width:11px;
  58. }
  59. #nav li a:hover {
  60.     background-color:#bcbdc1;
  61. }
  62. #nav ul li a {
  63.     background-color:#FFF;
  64.     color:#000;
  65.     font-size:11px;
  66.     line-height:22px;
  67. }
  68. #nav ul li a:hover {
  69.     background-color:#ddd;
  70.     color:#444;
  71. }
  72. /* Boton subcategorias */
  73. #nav ul li a img {
  74.     background: url("../images/punta_2.gif") no-repeat;
  75.     border-width:0px;
  76.     height:13px;
  77.     line-height:22px;
  78.     margin-right:0px;
  79.     vertical-align:middle;
  80.     width:11px;
  81. }
  82. #nav ul li:nth-child(odd) a img {
  83.     background:url("../images/punta_2.gif") no-repeat;
  84. }
  85. #nav a.sub:focus {
  86.     background:#bcbdc1;
  87.     outline:0;
  88. }
  89. #nav a:focus ~ ul li{
  90.      height: 20px;
  91.     -moz-transition:  0.4s linear;
  92.     -ms-transition: 0.4s linear;
  93.     -o-transition: 0.4s linears;
  94.     -webkit-transition: 0.4s linears;
  95.     transition: 0.4s linear;
  96. }
  97. #nav a:focus + img, #nav a:active + img {
  98.     display:block;
  99. }
  100. #nav a.sub:active {
  101.     background:#bcbdc1;
  102.     outline:0;
  103. }
  104. #nav a:active ~ ul li {
  105.     margin-top:0;
  106. }
  107. #nav ul:hover li {
  108.     margin-top:0;
  109. }

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..