Jump to content

Store's category hovering menu do not work for all categories

Recommended Posts

Hello everyone,


I am on 7.1 version. In my websites' store page I have a vertical category menu on the side. I want to show all sub and sub-sub categories in a pop-up box when I hover over categories. I almost achieved this, but my solution only works when I enter one of the categories and it only works for the category I am already in. Also, it do not show third level, sub-sub categories.

It would be perfect if I could go to main store page, hover over category and it shows all (clickable) subcategories in bold text and deeper sub-sub categories in light text. When I enter any level category, I want menu to work the same way as in main page.

In addition, I would love for the category box to appear next to menu on the right, not on menu itself.

This is how menu looks like now:


This is how it looks when I hover on:



There is the code I have (I am not a good coder, just using what's found on internet or chatGPT):

/* General style for menu and sub-menu */
.nested-category-tree-wrapper ul {
  list-style: none; /* Remove default list styles */
  padding: 0; /* Remove default padding */

/* Hide subcategories by default */
.nested-category-tree-wrapper ul ul,
.nested-category-tree-wrapper ul ul ul {
  display: none !important;
  position: absolute; /* Position subcategories */
  background-color: #fff; /* Background color for the subcategories */
  padding: 10px; /* Adjust padding as needed */
  z-index: 1000; /* Ensure it appears above other content */

/* Display subcategories on hover */
.nested-category-tree-wrapper ul li:hover > ul,
.nested-category-tree-wrapper ul ul li:hover > ul {
  display: block !important;

/* Style the main category and subcategory items */
.nested-category-tree-wrapper .category-link {
  padding: 10px; /* Adjust padding as needed */
  color: #333; /* Text color */
  text-decoration: none; /* Remove underline from links */
  display: block; /* Ensure links take up full width */
  position: relative; /* Position main category relative to subcategories */

/* Additional styling for hover state */
.nested-category-tree-wrapper .category-link:hover {
  background-color: #eee; /* Background color on hover */

/* Debugging styles to check hover effect */
.nested-category-tree-wrapper .debug-hover {
  border: 1px solid red; /* Border for debugging hover effect */



This is my store page:



I appreciate any help. And sorry for my language, not native.

Link to comment
  • Replies 0
  • Views 82
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.