Menu Horizontal Despegable De Color Gris


En el dia de hoy les traigo un menu sencilo, pero nos puede resultar muy util para nuestro Blog. Este menu es sencillo de hacer ya que solo esta hecho con css y html.

Aqui un ejemplo de como quedaria:

Haz clic en la imagen para vizualizarla en tamaño completo.




Como les habia dicho el menu se compone de codigos css y html los cuales solo tendra que copiarlos y pegarlos en su respectivo sitio.

El siguiente codigo lo tendras implantar en tu plantilla justo antes de: ]]></b:skin>

Codigo CSS


/*  1. PAGINA  */
/***************/

*{padding:0; margin:0;}

 body {
     font-size:62.5%; 
     font-family:"trebuchet ms" verdana,arial,sans-serif;
} 

/*Font-size: 1.0em = 10px when browser default size is 16px*/.page-container {
     width:900px; 
     margin:0px auto; 
     margin-top:100px; 
     border:none; 
     font-size:1.0em;
}

/**********************/
/*  2. Menu-Despegable */
/**********************/

.dropnav {
     white-space:nowrap /*IE hack*/; 
     float:left; width:900px; 
     border:none; 
     margin-top:30px; 
     background:rgb(225,225,225); 
     color:rgb(75,75,75); 
     font-size:130%;
}

 
.dropnav ul {
     list-style-type:none;
}

.dropnav ul li {
     float:left; 
     z-index:auto !important /*Non-IE6*/; 
     z-index:1000 /*IE6*/; 
     border-right:solid 1px rgb(175,175,175);
}


.dropnav ul li a {  
     float:none !important /*Non-IE6*/; 
     float:left /*IE-6*/; 
     display:block; height:3.1em; 
     line-height:3.1em; 
     padding:0 16px 0 16px; 
     text-decoration:none; 
     font-weight:bold; 
    color: rgb(100,100,100);
}

.dropnav ul li ul {
     display:none; 
     border:none;
}

.dropnav ul li:hover {
     position:relative;
}
 
.dropnav ul li:hover a {
     background-color:rgb(210,210,210); 
     text-decoration:none;
}
 
.dropnav ul li:hover ul {
     display:block; 
     width:10.0em; 
     position:absolute; 
     z-index:999; 
     top:3.0em; 
     margin-top:0.1em; 
     left:0;
}

.dropnav ul li:hover ul li a {
     white-space:normal; 
     display:block; 
     width:10.0em; 
     height:auto; 
     line-height:1.3em; 
     margin-left:-1px; 
     padding:4px 16px 4px 16px; 
     border-left:solid 1px rgb(175,175,175); 
     border-bottom: solid 1px rgb(175,175,175); 
     background-color:rgb(237,237,237); 
     font-weight:normal; 
     color:rgb(50,50,50);
}
 
.dropnav ul li:hover ul li a:hover {
     background-color:rgb(210,210,210); 
     text-decoration:none;
} 

.dropnav table {
     position:absolute; 
     top:0; 
     left:-1px; 
     border-collapse:collapse;
}

.dropnav ul li a:hover {
     position:relative /*Sylvain IE hack*/;  
     z-index:1000 /*Sylvain IE hack*/; 
     background-color:rgb(210,210,210); 
     text-decoration:none;
}
 
.dropnav ul li a:hover ul {
     display:block; 
     width:10.0em; 
     position:absolute; 
     z-index:999; 
     top:3.1em; t\op:3.0em; 
     left:0; 
     marg\in-top:0.1em;
}

.dropnav ul li a:hover ul li a {
     white-space:normal; 
     display:block; 
     w\idth:10.0em; 
     height:1px; 
     line-height:1.3em; 
     padding:4px 16px 4px 16px;
     border-left:solid 1px rgb(175,175,175);  
     border-bottom: solid 1px rgb(175,175,175); 
     background-color:rgb(237,237,237);  
     font-weight:normal; color:rgb(50,50,50);
}

.dropnav ul li a:hover ul li a:hover {
     background-color:rgb(210,210,210); 
     text-decoration:none;
}

En el body y el css la palabra width significa el ancho del menu, como veras tiene el 900 solo tendras que ponerle el numero del ancho de tu pagina.

Codigo HTML


Este código lo debes insertar en la parte del header de tu plantilla, solo busca debajo del body el div que encierra el header y ubica la lista que contiene inicio o home y sustituyela por la siguiente:


<!-- Menu-Despegable -->
    <div class="dropnav">
 
      
      <ul>
        <li><a href="#">Inicio</a></li>
      </ul>

      
      <ul>
         <li><a href="#">Despegable 1<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 11</a></li>
              <li><a href="#">Sublink 12</a></li>
              <li><a href="#">Sublink 13</a></li>
              <li><a href="#">Sublink 14</a></li>
              <li><a href="#">Sublink 15 entrda de varias lineas</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>          

     
      <ul>
        <li><a href="#">Despegable 2<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 21</a></li>
              <li><a href="#">Sublink 22</a></li>
              <li><a href="#">Sublink 23</a></li>
              <li><a href="#">Sublink 24</a></li>
              <li><a href="#">Sublink 25</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>  

      
      <ul>
        <li><a href="#">Despegable 3<!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
              <li><a href="#">Sublink 31</a></li>
              <li><a href="#">Sublink 32</a></li>
              <li><a href="#">Sublink 33</a></li>
              <li><a href="#">Sublink 34</a></li>
              <li><a href="#">Sublink 35</a></li>
            </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>  

      <ul>
        <li><a href="#">Muy muy larga</a></li>
        <li><a href="#">Otra entrada</a></li>
      </ul>         
    </div>


Si necesitas poner mas enlaces en los despegables solo tienes que insertar mas etiquetas li.

Si lo prefieres puedes copiar y pegar en el bloc de notas el siguinte texto, luego l guardas como .html y podras ver como queda el menu: Ver Archivo

Subir