JQuery solution for storing the Dropdown submenu inside the screen

Question

I am using bootstrap for my dropdown menu. But he has a problem,

If the My popup menu has a multi-level submenu, it displays a screen and a lower scroll bar appears.

How to save a submenu inside the screen, I need a jQuery solution.

Check out my screenshot

---

Here is the site:

http://jsfiddle.net/howtoplease/svLKN/

---

Here is the dropdown HTML

<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div> </div> 

Answer 1

How about this: it checks whether the submenu will overflow and change its position along the width of the submenu so that it is on the other side

 $('.sub-menu').parent().hover(function() { var menu = $(this).find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } }); 

http://jsfiddle.net/svLKN/4/