ApelsinaRomantica Posted June 10 Share Posted June 10 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: https://www.vijoklis.com/parduotuve I appreciate any help. And sorry for my language, not native. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment