¿Cómo cambiar el color del menú desplegable en HTML para una audiencia femenina?

Xauen · 2014-08-04T12:34:42-0500

Hola forobeteros!

En Blogger sabéis que añadiendo un Gadget en nuestra plantilla podemos por ejemplo, incluir un menú desplegable como el que tengo yo en unas de mis webs.

El caso es que dentro tengo esto:

<div id=' '>
<ul id=' '>
<li>
...
</li>
</li></li></ul></div>

Me gustaría ponerlo en color azul y rosa (iría rotando para ver cual tiene más aceptación) para que resalte y porque principalmente mi público son mujeres.

¿Me podéis ayudar con esto?

Muchas gracias de antemano!

Un saludo,
Xauen

RafaG · 2014-08-04T15:11:14-0500

Con un poco de CSS puede quedar algo decente, prueba con esto:

Edit fiddle - JSFiddle

HTML:

<div class="contenedor-menu-desplegable">
    <ul class="menu-desplegable">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
    </ul>
</div>

CSS:

Insertar CODE, HTML o PHP:

.menu-desplegable{
    margin: 0px;
    padding:0px;
    list-style-type: none;
}

.menu-desplegable li{
    background-color: pink;
    margin: 1px;
    padding:0px;
}

.menu-desplegable li:hover{
    background-color: #FA8F8F;
    
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}

.menu-desplegable a{
    display:block;
    padding:5px;
    color: black;
    text-decoration: none;
    font-family: Arial, sans-serif;
    text-align:center;
}

Cambiando la propiedad background-color puedes modificar el color por el que quieras.

Un saludo.

Xauen · 2014-08-04T16:56:49-0500

RafaG dijo:

Con un poco de CSS puede quedar algo decente, prueba con esto:

Edit fiddle - JSFiddle

HTML:

<div class="contenedor-menu-desplegable">
    <ul class="menu-desplegable">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
    </ul>
</div>

CSS:

Insertar CODE, HTML o PHP:

.menu-desplegable{
    margin: 0px;
    padding:0px;
    list-style-type: none;
}

.menu-desplegable li{
    background-color: pink;
    margin: 1px;
    padding:0px;
}

.menu-desplegable li:hover{
    background-color: #FA8F8F;
    
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}

.menu-desplegable a{
    display:block;
    padding:5px;
    color: black;
    text-decoration: none;
    font-family: Arial, sans-serif;
    text-align:center;
}

Cambiando la propiedad background-color puedes modificar el color por el que quieras.

Un saludo.

Disculpa, para ejecutar aquello de CSS tengo que tener algo instalado en mi plantilla de blogger o algo así?

Lo digo porque cuando lo pongo me aparece asi:

Un saludo,
Xauen

packetmanxd · 2014-08-04T17:11:02-0500

El codigo CSS debes incoporarlo antes de la siguiente etiqueta ]]></b:skin>

Xauen · 2014-08-04T17:34:48-0500

ctapia dijo:
El codigo CSS debes incoporarlo antes de la siguiente etiqueta ]=]=></b:skin>

Gracias pero no acabo de entender bien o igual me expliqué mal.

Estoy en Diseño, HTML/Javascript, porque es un menú Home, etc...

¿Tengo que ir a Plantilla > Editor HTML y poner eso ahí?

Un saludo,
Xauen

packetmanxd · 2014-08-04T20:46:49-0500

Estoy en Diseño, HTML/Javascript, porque es un menú Home, etc...

acá debes colocar el HTML

HTML:

<div class="contenedor-menu-desplegable">
    <ul class="menu-desplegable">
        <li><a href="#">Opción 1</a></li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
    </ul>
</div>

¿Tengo que ir a Plantilla > Editor HTML y poner eso ahí? ---> SÍ

Acá el CSS, incorporalo antes de la siguiente etiqueta ]]></b:skin>

Saludos

¿Cómo cambiar el color del menú desplegable en HTML para una audiencia femenina?

Xauen

RafaG

Xauen

packetmanxd

Xauen

packetmanxd

Temas similares