HOVER EFFECT IN NAVIGATION MENU SO THAT THE MENU AND SUBMENU OPENS AUTOMATICALLY

[saanjhbati]

I WANT A HOVER EFFECT IN THE NAVIGATION MENU, SO THE MENU AND ALL THE SUBMENUS OPEN AUTOMATICALLY JUST HOLDING THE MOUSE POINTER IN MY NAVIGATION MENU.

[MooseDesk]

Hi @saanjhbati ,

Thanks for reaching out to the community. We are MooseDesk, a comprehensive Live Chat, FAQ & Helpdesk App designed to elevate your customer support experience.

Since I currently can't access your store to check, I have an example of code that handles the logic you want. Please follow the logic of that code. If you have any difficulties, feel free to ask me. It would be better if you could provide me with the store URL and password.

<ul class="nav-menu">
  <li>
    <a href="#">Menu Item 1</a>
    <ul class="submenu">
      <li><a href="#">Submenu Item 1.1</a></li>
      <li><a href="#">Submenu Item 1.2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
    <ul class="submenu">
      <li><a href="#">Submenu Item 2.1</a></li>
      <li><a href="#">Submenu Item 2.2</a></li>
    </ul>
  </li>
</ul>

Style

.nav-menu {
    display: none;
}
.submenu {
    display: none;
}
.nav-menu:hover {
    display: block;
}
.nav-menu:hover .submenu {
    display: block;
}

I hope this answer addresses your question effectively. If you found it helpful, we’d appreciate a 'LIKE' for MooseDesk. If your issue is resolved, please mark this as 'SOLUTION’.

In the meantime, our MooseDesk Team is always here to help with customer support solutions. We’re passionate about improving your customer experiences through our Live Chat, FAQ, and Helpdesk App.

With MooseDesk, you can engage with customers through omnichannel support, manage inquiries with a robust ticket system, and provide quick responses.

• Or you can let customers resolve questions faster with in-built FAQ, Order tracking module, and more.

Once again, keep up the fantastic work, and I wish you the best of luck in the future! 

[Small_Task_Help]

Hi,

Locate menu code

base.css or theme.css file and add or modify css

CSS example

/* Main menu hover effect */
.site-nav > li {
  position: relative; /* Ensures the submenu is positioned relative to the parent */
}

.site-nav > li:hover > .sub-menu {
  display: block; /* Shows the submenu when the parent is hovered */
}

/* Submenu default state */
.sub-menu {
  display: none; /* Keeps the submenu hidden by default */
  position: absolute; /* Positions the submenu */
  top: 100%; /* Ensures it shows below the parent item */
  left: 0;
  z-index: 999; /* Keeps the submenu above other elements */
  background-color: white; /* Set background color */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
}

/* Submenu items styling */
.sub-menu li {
  padding: 10px 15px; /* Padding for submenu items */
  white-space: nowrap; /* Prevents text wrapping */
}

.sub-menu li:hover {
  background-color: #f5f5f5; /* Change background color on hover */
}

Also check submenu structure is correct or not