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

Xauen Seguir
Seguidores
36

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
27 Jun 2014
Mensajes
4.313
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

Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Jun 2014
Mensajes
15
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

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
27 Jun 2014
Mensajes
4.313
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:

e00j1x.jpg


Un saludo,
Xauen
 

packetmanxd

Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Jul 2014
Mensajes
628
El codigo CSS debes incoporarlo antes de la siguiente etiqueta ]]></b:skin>
 

Xauen

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
27 Jun 2014
Mensajes
4.313
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...

avlbb4.jpg


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

Un saludo,
Xauen
 

packetmanxd

Delta
SEO
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
12 Jul 2014
Mensajes
628
Estoy en Diseño, HTML/Javascript, porque es un menú Home, etc...

avlbb4.jpg


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
 
Arriba