Hola estoy haciendo un navegador con css y por mucho que lo intento no logro hacer que la barra se vea medianamente transparente y el texto de esta se lea bien.
Sé que existe el opacity
pero si lo pongo me lo muestra todo incluyendo el texto. Y si en el class del texto le pongo opacity:none
no funciona, también he encontrado algo con alpha()
pero no me va tampoco(el background color me daría igual). He probado mil cosas y buscado por Internet y no soluciono mi problema.Sé que es una pregunta muy concreta pero ya no sé a quien acudir.
Gracias de antemano.
#nav{
position:fixed;
float:left;
width:100%;
margin:0%;
padding: 0%;
text-align: center;
margin-top:0px;
}
#nav li{
float:left;
display: inline;
width:25%;
list-style: none;
position:relative;
}
#nav li a{
color:#666;
text-decoration:none;
display:inline;
font-size:30pt;
font-family: 'Nanum Pen Script', cursive;
}
#nav li a:hover{
border:1px black solid;
color:black;
border-radius: 12px;
background-color: skyblue;
opacity: 0.6;
}
#nav li.parent:hover{
margin:0px;
}
#nav li ul {
background-color: white;
float: none;
width: 100%;
margin:0%;
padding: 0%;
display:none;
border:1px black solid;
position: absolute;
left: -1px;
top:100%;
border-radius: 12px;
}
#nav li:hover ul {
display: block;
float: none;
}
#nav li li{
display:block;
float: none;
width: 100%;
margin:0%;
padding: 0%;
}
#nav li li a{
display:block;
float: none;
}
<ul id="nav">
<li class="parent"><a href="inicio.html">Inici</a></li>
<li class="parent"><a href="coneixens.html">Coneixen's</a></li>
<li class="parent"><a href="#">Varietats que oferim</a>
<ul>
<li><a href="fruites.html">Fruites</a></li>
<li><a>Verdures</a></li>
<li><a>Llegums</a></li>
<li><a>Altres</a></li>
</ul>
</li>
<li class="parent"><a href="contacta.html">Contacta'ns</a></li>
</ul>
{ }
que habiendo seleccionado el codigo si pulsas le da formato