Как я могу показать div только при наведении курсора на элемент меню или div?

У меня есть элементы, содержащиеся в неупорядоченном списке. У меня есть скрытые div (используя display: none;) за пределами этого списка. Когда вы наводите курсор мыши на элемент списка, я бы хотел, чтобы div отображался. Он также должен оставаться видимым, если вы перемещаете указатель мыши от элемента списка к элементу под ним.

Я открыт для достижения этой цели с помощью CSS, JavaScript / jQuery. Кроме того, мой документ установлен на HTML5.

Это то, с чем я сейчас работаю.

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

А под навигацией у меня есть контент, который я хотел бы отображать при наведении курсора на соответствующий элемент.

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

Я чувствую, что для этого должно быть простое решение, но мои попытки пока не увенчались успехом. Самая большая проблема заключается в том, что показ Div не только при наведении курсора на элемент меню, но и при переходе от меню к видимому разделу.

Любой совет ценится, спасибо, что нашли время, чтобы прочитать это далеко.

Ответы на вопрос(2)

Ваш ответ на вопрос