7/26/2019 Cmo Aadir Menu Desplegable

1/5

Si utilizas plantillas pre diseadas o dinmicas, es muy probable este tutorial NO

te funcione

Si quieres aplicarlo, ves al men plantilla y cambia tu plantilla actual a

sencilla

Si no encuentras en el html de tu plantilla el cdigo ]]> busca slo

/b:skin

Revisa este tutorial y as entenders porqu ocurre

Para buscar cdigo dentro de la plantilla html debes utilizar

Ctrl y F a la vez si tienes un PC

Command y F a la vez si tienes un Mac

Si quieres cambiar el tipo de fuente, sustituye lo marcado en color rojo

font:normal 12px Helvetica, sans-serif; margin: 0;

por la fuente que t elijas, por ejemplo

font:normal 12px century gothic; margin: 0;

Eso s, debes de tener instalada previamente la tipografa que hayas elegido,

mira este tutorial

Si quieres crear una pestaa donde queden agrupadas todas los posts con una

etiqueta determinada, por favor, mira este y este tutorial

Si quieres cambiar el color de la barra, cambia el valor all donde dice

background: #bdbfbf;

por el color que necesites

background: #949494;

Este tutorial te averiguar el cdigo de color que quieres

Si te queda la barra muy pegada a la cabecera haz lo siguiente, cambia

7/26/2019 Cmo Aadir Menu Desplegable

2/5

border-top: 0px solid;

por el valor que necesites, por ejemplo

border-top: 10px solid;

Sigue las instrucciones tal cual las explico en el vdeo, si no te sale por favor,

borra y vuelve a empezar

Si necesitas un diseo ms personalizado de lo que en el vdeo tutorial te

muestro, por favor, escribe a hola@threefeelings.com y pdele presupuesto.

Ella es diseadora grfica profesional e informtica y seguro, podr ayudarte

Recuerda SIEMPRE antes de empezar hacer una copia de seguridad

Descrgate este documento en tu ordenador para as, poder seleccionar el cdigo

que ves aqu abajo

Paso 1

Paso 2

Pagina Principal

Sobre mi

Categoria 1

Categoria 1.1

Categoria 1.2

7/26/2019 Cmo Aadir Menu Desplegable

3/5

Categoria 2

Categoria 2.1

Categoria 2.2

Paso 3

]]>

Paso 4

/**MBW Navgation bar**/

#mbwnavbar {

background: #bdbfbf;width: 850px;

color: #FFF;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid;

height:35px;

}

#mbwnav {

margin: 0;

padding: 0;

}

#mbwnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbwnav li {list-style: none;

7/26/2019 Cmo Aadir Menu Desplegable

4/5

margin: 0;

padding: 0;

border-left:1px solid #333;

border-right:1px solid #333;

height:35px;}

#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {

color: #FFF;

display: block;

font:normal 12px Helvetica, sans-serif; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

#mbwnav li a:hover, #mbwnav li a:active {

background: #028490;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbwnav li {

float: left;

padding: 0;}

#mbwnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbwnav li ul a {

width: 140px;

}

#mbwnav li ul ul {

margin: -25px 0 0 161px;

}

#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav

li.sfhover ul ul ul { left: -999em;

}#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav

7/26/2019 Cmo Aadir Menu Desplegable

5/5

li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {

left: auto;

}

#mbwnav li:hover, #mbwnav li.sfhover {

position: static;}

#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {

background: #028490;

width: 120px;

color: #FFF;

display: block;

font:normal 12px Helvetica, sans-serif;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#mbwnav li li a:hover, #mbwnavli li a:active {

background: #70b6bd;

color: #FFF;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;}