Ocultar capa

[rakol]

Como puedo conseguir esconder una capa y que al pulsar un vinculo o pasar sobre el aparezca la capa oculta?? Muchas gracias

[ArturoGallegos]

Código HTML:

<a href="#">link 1</a>
<div>capa oculta</div>
 

Código CSS:

a+div{display:none;}
a:hover+div,a:focus+div{display:block;}
 

codigo de ejemplo rapido, estudialo y adaptalo a tus necesidades

[rakol]

La idea es colocarlo en 2 elementos de una lista <li> de mi barra de navegacion

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li><a href="#">Documentos</a></li>
<li><a href="#">Departamentos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>

Y hoy estoy algo espero no logro conseguirlo en css, seria para el li documentos y departamentos e intentado con algo como esto

nav ul li a:nth-child(3) +#ocultar{
display:none;
}

nav ul li a:nth-child(3):hover +#ocultar, nav ul li a:nth-child(3):focus+#ocultar {
display:block;
}

pero no ha habido manera, me echas una mano please?

[rakol]

nadie ? please

[comablck]

por q no le pones alguna clase al link con el q queres mostrar e div oculto? algo asi..

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li><a href="#" class="mostrar">Documentos</a></li>
<li><a href="#">Departamentos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
<nav>

<div>...</div>

div {
display:none;
}

nav a.mostrar:hover div {
display:block;
}

[ArturoGallegos]

@comablck ese css no funciona con la estructura html que expones, el css supondria que el div esta dentro del enlace.

@rakol , prueba hacer lo que dice comablac y agrega una clase amlos elementos, o bien prueba no usar nth-child dejalo en:
nav li div{display:none}
nav li:hover div{display:block}

Siguiendo el patron del css que expones me parexe que es la mejor forma de hacerlo.

[rakol]

Perdona mi ignorancia pero no entiendo a que te refieres... realizo lo que comablck comenta? pero dices que la estructura html no es valida como lo seria si no? un saludo y gracias

[comablck]

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li class="mostrar"><a href="#">Documentos</a> <div class="dv">...</div> </li>
<li><a href="#">Departamentos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
<nav>

.dv {
display:none;
}

nav .mostrar:hover .dv {
display:block;
}

[ArturoGallegos]

Perdon por revolverte las ideas, este ultimo codigo que te mostraron es el ideal aunque si es un menu y solo tendra un div a dentro bien puede usarse sin las clases css

Código CSS:

nav li>div{display:none;}
nav li:hover>div{display:block;}