Como mudar a cor do menu suspenso em HTML para um público feminino?

Xauen · 04/08/2014

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 · 04/08/2014

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:

Inserir CODE, HTML ou 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 · 04/08/2014

RafaG disse:

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:

Inserir CODE, HTML ou 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 · 04/08/2014

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

Xauen · 04/08/2014

ctapia disse:
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 · 04/08/2014

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

Como mudar a cor do menu suspenso em HTML para um público feminino?

Xauen

RafaG

Xauen

packetmanxd

Xauen

packetmanxd

Tópicos similares