how to display sub-sub categories on left side

Question

please visit my site link

In POWER TOOLS category, go for FESTOOL Sub-category. You can see DRILLING AND FASTENING sub-sub Category there. But thoseDRILLING AND FASTENING sub-sub category is not visible properly as it is present after monitor width.

What I need to do is, when we hover mouse on FESTOOL, I want to display DRILLING AND FASTENING sub-sub Category and other sub-sub categories on left side. If Possible, I want to do these changes only for POWER TOOLS category in my site, so that every category menu link is visible directly in my site.

Please help me to find solution.

Let me know if you have any queries.

Thanks in advance.

Answer 1

The url I mentioned (https://stackoverflow.com/questions/11512032/detect-if-dropdown-navigation-would-go-off-screen-and-reposition-it) uses a JS + CSS solution. This means, beside editing a css file, you would have to create a js file or add that js to a phtml file in your template.

If you don't need a general solution, a quick CSS solution which will work only for that specific menu is:

   .header-nav-container-home ul.nav-menu li.nav-5-1 ul li.parent:hover ul {
       left: -100%;
   }

Add this line at the end of menu.css.

EDIT

CSS selectors explanation:

.header-nav-container-home ul.nav-menu - main menu

.header-nav-container-home ul.nav-menu li.nav-5-1 - first child of the fifth menu item (in your case Festool)

.header-nav-container-home ul.nav-menu li.nav-5-1 ul li.parent:hover ul - every sub- submenu of Festool

So, I told the browser to reposition only the sub, sub-menus of Festool. Want every sub- sub-menu of Power Tools, change "nav-5-1" to "nav-5". The rule then becomes:

  .header-nav-container-home ul.nav-menu li.nav-5 ul li.parent:hover ul {
   left: -100%;
  }

And so on...