Question

Whenever I hover over the second button in the menu, a “submenu” appears. When it appears, it partially covers the images in a div “container”.

The styling of the submenu is such that it is semi-transparent so the images inside the div “container” also appear in the background of the menu, which doesnt look that good.

I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div “container” hide and appear again when I move my mouse away from the menu. The div “container” should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??

HTML Code:

<div id="menu">
            <ul class="menu" id="tempMenu">
                <li class="Home"><a href="www.google.com">Home</a></li>
                <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">One</a>
                            </li></br>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
  </ul>
        </div>

<div id="container">

          <div id="box1" class="box">Image1<img src="images/image1.png"></div>
          <div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>

CSS Code:

ul.menu .submenu{
    display: none;
   position: absolute;
}

ul.menu li:hover .submenu{
    display: block;
}

Answer 1

$('.submenu').hover(function() {
    $('#container').hide()
}, function() {
    $('#container').show()
});