¿Cómo puedo mostrar un div solo al pasar el cursor sobre un elemento del menú o el div?

Tengo elementos contenidos en una lista desordenada. He ocultado divs (usando display: none;) fuera de esta lista. Cuando pasa el cursor sobre un elemento de la lista, me gustaría que aparezca el div. También debe permanecer visible si mueve el mouse del elemento de la lista al div debajo de él.

Estoy abierto a lograr esto a través de CSS, JavaScript / jQuery. Además, mi documento está configurado en HTML5.

Esto es con lo que estoy trabajando actualmente.

<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 !-->

Y debajo del navegador, tengo el contenido que me gustaría mostrar al pasar el cursor sobre el elemento correspondiente.

        <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 !-->

Siento que debería haber una solución fácil para esto, pero mis intentos hasta ahora se han quedado cortos. El mayor problema es hacer que el div se muestre no solo cuando se pasa el elemento del menú, sino también cuando se mueve desde el menú al div visible.

Cualquier consejo es apreciado, gracias por tomarse el tiempo de leer hasta aquí.

Respuestas a la pregunta(4)

Su respuesta a la pregunta