Navigation getting cut off - wordpress

Question

So we're using Cherry Frameworks (ugh) with Wordpress. The third-level navigation is getting cut off. I've tried manipulating the CSS to fix the issue to no avail. There's no option in the framework.
The problem resides in the Services menu. Resize your screen smaller to view the issue.
My solution is to push the third-level nav to the left side instead of the right side. Thoughts on how to do this?
http://dev.torontofamilytherapist.com/

Answer 1

So using chrome's inspect element, I was able to figure out what needed to be changed:
#topnav li .sub-menu .sub-menu {
left: 100%;
margin: -10px 0 0 2px;
}
changed to:
#topnav li .sub-menu .sub-menu {
left: -100%;
margin: -12px 0 0 2px;
width: 100%;
}
The result:
As you can see the items are appearing on the left, but you'll need to do some css tweaks to get them to look juuuust right.
Here's how you can troubleshoot CSS issues like this using chrome's developer tools:
Right click over the offending element, in this case: we are looking at "Services", then select "Inspect Element":
You should now be inspecting the current CSS like so:
Now since these items are appearing when you hover, you'll have to 'force' a hover state.
This is where the fun begins. You'll have to make sure you find the right elements to force the hover on. I actually had a little struggle with this, so I ended up adding the force hover state to many other elements until it finally appeared (the green menu)
Repeated the same process to get the third tier menu.
Now you right click on the actual menu and select "inspect element" again - this time since the menus are FORCED HOVER, the item will stay selected when move the mouse away and you can finally see the actual CSS.
It was actually harder than it needed to be, as the theme really has some counter-intuitive settings to show these menus (why not just on hover?? it really felt like on multiple items hover..)