Multi-level drop-down issue when aligned right

Well the first level is in the header, when the second level drops down from the header it extends past the right side a little and there is a small bit of horizontal scroll, but when the third level flies out, you can't even see it. It's way off the screen to the right and there is a much bigger horizontal scroll. I just remembered that when I first floated the menu right, the menu dropped down and was actually getting cut off in the #wrapper itself because it was set to overflow:hidden. I got rid of the overflow:hidden and then the menu was able to extend beyond the wrapper, but then the problem started of the menu going all the way off the screen. And yes I am using 1.8.

Here you go. So if you hover over "Clients" and then "Information Technology", that flyout will go off the screen and you will get a little horizontal scroll, but when you then hover over "Enterprise Applications" there is actually another flyout that should be there, but you can't even see it. The entire menu is off the right side of the screen and you can see the resulting horizontal scroll bar.

Thanks for looking into this. It can probably be fixed with some creative CSS or maybe jQuery, but I'm just not sure the best way to handle it.

Oh good that makes me feel a little better, that it wasn't something I screwed up customizing the template and you're seeing the same behavior. :-) So yeah, not sure. I tried messing with it yesterday, but couldn't get anything to work right.

Yeah I was tempted to use the Suckerfish module or something along those lines, but I really like the way you implemented the mobile version of the navigation and I didn't want to lose that.

Yeah actually I had already gotten rid of the overflow:hidden. That's what got me in this predicament in the first place. Initially, the menu was getting cutoff (hidden) by the right edge of the wrapper. When I got rid of the overflow, the menu would extend beyond the wrapper, but it would also extend beyond the SCREEN.

So needless to say, I'm still in the same situation. arg. I'm tempted to tell the designers to just move the menu to the left instead of having it on the right. Something tells me we aren't gonna fix this quick.

So I ended up using some jQuery and it seems to be working fine. By default the drop-down will fly to the right, but if the drop-down would end up flying off the screen, it will fly to the left instead. I needed to add a border to the ul's though so when the dropdown menus start flying out you can tell what menu is what since they start overlapping. Thanks for your help on this though!!

$('#main-menu ul').not(':first').css('border', '1px solid grey');

$('#main-menu li').mouseenter(function() {
  $(this).children('ul').css('display', 'none').stop(true, true).slideToggle(250).css('display', 'block').children('ul').css('display', 'none');
  
  //make sure menu does not fly off the right of the screen
  if ($(this).children('ul').offset().left + 200 > $(window).width()) {       
    $(this).children('ul').css('right', 180);          
  } 
});