Menu Horizontal Nº 3

Menu Horizontal Despegable De Color Azul

En esta ocasion les traigo otro Menu Despegable hecho en html y css.

Aunque es parecido a algunos del mismo tipo los codigos son diferentes y varian tanto su tamaño como su color.

Aqui tienes imagenes de como quedaria:

Haz clic en la imagen para visualizarla en tamaño completo




Como ya sabeis solo tienes que copiar y pegar los codigo. Por si quiere cambiar el color, en el codigo subnavar puedes hacerlo cambiando el valor de background.

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

Codigo CSS

#subnavbar {
background: #003B8E;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;

}

#subnav li {width:100px;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #f1f1f1;
color: blue;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #003B8E;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #f1f1f1;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li { 
}

#subnav li ul a { 
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active { 
}

#subnav li ul ul {
margin: 5px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, 
#subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, 
#subnav li li li:hover ul, #subnav li.sfhover ul, 
#subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover { 
position: static;
}

Codigo HTML

Este codigo lo debes poner en la parte donde esta incluida el nav o el header de tu blog, fijate debajo de body

  <div id="subnavbar">
<ul id="subnav"> 
      
   <li><a href="URL DEL BLOG" title="Inicio">INICIO</a></li>
       <li><a href="" title="">LINK1</a>
         <ul>
    
              <li><a href="" title="">SUB-LINK1</a></li>
              <li><a href="" title="">SUB-LINK1</a></li>
              <li><a href="" title="">SUB-LINK1</a></li>
              </ul>
              </li>
              <li><a href="">LINK</a></li>
            <li><a href="" title="">LINK2</a>
          <ul>
        <li><a href="" title="">SUB-LINK2</a></li>
      <li><a href="" title="">SUB-LINK2</a></li>          

      <li><a href="" title="">SUB-LINK2</a></li>
      <li><a href="" title="">SUB-LINK2</a></li>
        </ul>
          </li>
            <li><a href="" title="">LINK3</a>
              <ul>
              <li><a href="" title="">SUB-LINK3</a></li>
              <li><a href="" title="">SUB-LINK3</li>
              </ul>
              </li>
              <li><a href="" title="">LINK4</a>
            <ul>
          <li><a href="" title="">SUB-LINK4</a></li>
        <li><a href="" title="">SUB-LINK4</a></li>
      </ul>  

      </li>
      <li><a href="" title="">LINK5</a>
        <ul>
          <li =><a href="" title="">SUB-LINK5</a></li>
            
              <li =><a href="" title="">SUB-LINK5</a></li>
              <li =><a href="" title="">SUB-LINK5</a></li>
              <li =><a href="" title="">SUB-LINK5</a></li>
              </ul>
            <li><a href="Contactarme">CONTACTO</a></li>
          </li>
</ul>
</div>

Fijate muy bien como ban los codigos para su entendimiento y poderlos configurar a tu gusto, si quires puedes poner o quitar link en el despegable solo hay que quitar o poner etiquetas li.


Subir