Como posso mostrar uma div apenas ao passar o mouse sobre um item de menu ou a di
Tenho itens contidos em uma lista não ordenada. Eu tenho divs ocultos (usando display: none;) fora desta lista. Quando você passa o mouse sobre um item da lista, gostaria que a div aparecesse. Ele também deve permanecer visível se você mover o mouse do item da lista para a div abaixo del
Estou aberto para fazer isso através de CSS, JavaScript / jQuery. Além disso, meu documento está definido como HTML5.
É com isso que estou trabalhando atualment
<nav id="main-menu">
<ul>
<li><a class="first-link parent" href="">First Link</a></li>
<li><a class="second-link parent" href="">Second Link</a></li>
<li><a class="third-link parent" href="">Third Link</a></li>
<li><a class="fourth-link parent" href="">Fourth Link</a></li>
</ul>
</nav><!-- #main-menu !-->
E abaixo da navegação, tenho o conteúdo que gostaria de exibir ao passar o mouse sobre o item correspondent
<div id="first-widget" class="widget-container">
<h2>Sub Title</h2>
<p>Lorem Ipsum
<a href="#">Read More</a></p>
</div><!-- .first-widget !-->
<div id="second-widget" class="widget-container">
<h2>Sub Title</h2>
<p>Lorem Ipsum
<a href="#">Read More</a></p>
</div><!-- .second-widget !-->
<div id="third-widget" class="widget-container">
<h2>Sub Title</h2>
<p>Lorem Ipsum
<a href="#">Read More</a></p>
</div><!-- .third-widget !-->
<div id="fourth-widget" class="widget-container">
<h2>Sub Title</h2>
<p>Lorem Ipsum
<a href="#">Read More</a></p>
</div><!-- .fourth-widget !-->
</aside><!-- .hidden !-->
Sinto que deve haver uma solução fácil para isso, mas minhas tentativas até agora não foram atendidas. O maior problema é exibir a div não apenas ao passar o mouse sobre o item de menu, mas também quando você passa do menu para a div visíve
Qualquer conselho é apreciado, obrigado por reservar um tempo para ler até aqu