3 level deep clickable menu

Hello everyone. I'm now working on a website which currently has parent menu item and its children. Which means, the current submenu has submenu level 2. My question would be, is it possible to have 3 level deep clickable submenu on DIVI theme? Which means, my top menu has submenus and one of its submenus has another submenus. As I've seen on the internet, it is indeed possible to have 3 level deep submenu on DIVI, but only when the parent menu item and its children are hovered. My submenus are now clickable, so as I assume it won't work so easily as expected. I would really appreciate the feedback from this community. Thank you!

 

As I mentioned before, I have many 7 clickable parent item menus and each of these menus has dropdown submenu. Inside one of these dropdown submenus, only one menu (one li) that has another submenu (3 level deep submenu). So, it would not be ideal to implement mega menu for this issue (as I did some research for the solution to this problem, the common one is to implement mega menu). Until now, this is the jquery codes I came up with:

Code:

Log In or Sign Up to view this code.

With these codes: user could click the a parent menu item and the relevant dropdown menu will be shown. But, when I want to click that one submenu inside that relevant menu, it won't be shown, despite these submenus have the same class. As for the CSS code:

Code:

Log In or Sign Up to view this code.

Every submenus are now clickable except that one submenu which has 3 level deep down submenu. I hope the codes above could give you a little bit of an overview on how my website works. Looking forward for the feedback!

 

The tutorial you sent from peeayecreative looks promising, but as I implemented it, it still hasn't worked (despite these submenus have the same class name). I also forgot to mention that the submenu which has the 3rd level submenu has also its own website page. Which means, the best solution would be when the user hover this submenu, it will show the 3rd level submenu, but when the user clicks this submenu, it will redirect the user to the relevant website. With this issue, I'll try to implement your approach with hover functionality. I'll let you know if I still stuck with it. Thanks so much for all the feedback!

 

So I tried your code with hover functionality. Apparently it doesn't work because I already applied this clickable menu function (in jQuery) for all of the submenu, despite what parent menu item name I defined to show this 3rd level submenu. So I choose to not implement 3 level deep clickable menu. Hopefully there are people who have the same issue and share the solution to this community.