Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu is being hovered over.
Here is the CSS code:
header nav {
float: right;
}
/* Rest of the CSS code... */
And the HTML code:
<nav>
<ul id='menu'>
<!-- Menu items go here -->
</ul>
</nav>
To solve this issue, we can use the following script which will display the submenu only on hover:
<script type="text/javascript">
$('#menu li').hover(function() {
$(this).find('ul').show();
},
function() {
$(this).find('ul').hide();
});
</script>