he conseguido realizar más o menos lo que quería con mi web. Pero me encuentro con que ahora quiero hacer que la parte de arriba de mi "botón" sea transparente para así poder visualizar la línea negra de la plantilla y el resto del botón sea blanco con el color del texto como el que tengo puesto en la plantilla general. Pero no lo consigo. Adjunto código css para a ver si alguien, me puede ayudar
.drop-down li a, .drop-down li span.separator {
border: 1px;
display : inline;
padding: 12px 4px 12px 6px;
font-size: 1.2em;
text-decoration: none;
text-align: left;
background-image:none;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.90s ease-in-out;
word-wrap: break-word;
/*estilo forma botón*/
border: 2px solid transparent; /*anchura, estilo y color borde*/
padding: 0; /*espacio alrededor texto*/
background-color: #778899; /*color botón*/
color: #7A0707; /*color texto*/
text-decoration: none; /*decoración texto*/
text-transform: uppercase; /*capitalización texto*/
font-family: 'Helvetica', sans-serif; /*tipografía texto*/
}
Como veis en la imagen el fondo entero es gris. Quiero que sea blanco pero la parte de arriba, que tenga esa línea negra o sea transparente. A parte quiero que salga todo como en una caja. Intento ponerle un "border" a esa parte del módulo "js-navigation" Pero no me aparece. adjunto código de este bloque
#js_navigation{
position: fixed;
margin-top: 180px;
border-top: 10px;
border-bottom: 1em;
}
Con todo el código que he estado tocando. Mis preguntas son:
Como hacer que la parte de arriba del botón tenga la misma línea negra de atrás o como hacer transparente la parte de arriba del botón.
Como puedo unir todos mis botones, es decir que no haya márgenes o si los hay ya se los daré yo como vea conveniente.
Como puedo meter esos botones en una especie de "div" para que sea una caja.
Como le cambio en color al texto del enlace, ya que no puedo cambiarlo.