Trying to create a menu using ul HTML, but encountering an issue. When the website is opened, the menu shows up by default, whereas I only want it to appear when a mouse hovers over it. Even after attempting to change the CSS class, the desired functionality still isn't achieved.
Any suggestions on how to resolve this?
HTML
<div class="all-category">
<h3 class="cat-heading"><i class="fa fa-bars" aria-hidden="true"></i>CATEGORIES</h3>
<ul class="main-category" >
<li>Menu 1</li>
<li>Menu 2</li>
</ul><!--/ul-categories-->
</div><!--/categories-->
CSS
.header.sticky .all-category{}
.header.sticky .all-category h3{
cursor:pointer;
}
.header.sticky .all-category .main-category{
opacity:0;
visibility:hidden;
-webkit-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.header.sticky .all-category:hover .main-category{
opacity:1;
visibility:visible;
}
Refer to the image below for a visual representation of the current issue. The menu displays upon opening the site, contrary to the desired behavior of showing only on mouse hover.