Upon hovering over the second button in the menu, a "submenu" pops up covering part of the images within a div labeled as "container".
The design of the submenu is somewhat translucent, causing the images inside the div "container" to faintly show through the menu background. This effect is not ideal.
An easy fix would involve altering the position of the div, but this would result in the images no longer being centered, which is not acceptable. Is it feasible for the div "container" to hide whenever a button with a submenu is hovered over, and then reappear when the mouse moves away from the menu? It's important that the div "container" remains visible when hovering over the first Home button (which has no submenu), while keeping the images hidden while the menu is open. Could this functionality be implemented using JavaScript or jQuery or CSS3?
Customized 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>
Tweaked CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}