Full width drop-down menu regardless of hovering position Bootstrap

Question

Currently I am using this mega menu

http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html

I need a full width drop-down menu regardless of hovering position.

Firstly, let me show you what I am hovering on a drop-down menu item.

As you can see, when I hover on '4 COLS' it doesn't cover whole container. The left side of the drop-down menu is missing.

I want it to be full width regardless of hovering position.

I achieved that by changing a value in custom.css file.

http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css

/* drop-down menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  **left: -1px;**
  z-index: 1000;
  display: none;
  float: left;

By changing left: -1px to left: -120px I got what I want

However, this time it is neither something dynamic nor probably responsive.

I suppose, the width of the previous menu items must be calculated and written to the 'left: ? px' automatically or let's say programmatically which I don't have any idea.

Maybe this could be done by using this kind of jquery method.

How to find the width of the child ul li a

Also these are some example what I want. I just need to know how I will modify my piece of code in order to change the hover behavior responsively.

http://jsfiddle.net/jWSPz/4/ http://jsfiddle.net/jWSPz/9/

Solution

Firstly, the demo site does not nest the submenu under the current menu item, instead, it has a separate container for submenus.

Secondly, there has to be some JS usage as your page is responsive, and also because the submenus are nested within your menu items.

If you would like to proceed, paste this JS jQuery snippet into your page (may not be perfect as I coded this on the fly, and unable to test it on your page)

$(function() {
    $('.nav').on('mouseover', '.dropdown', function() {

        // Get width of .navbar-inner
        var w = $('.navbar-inner').width();

        // Add 20px width due to padding gon .navbar-inner
        w += 20;

        $('.nav .dropdown-menu').each(function() {
            // Get relative offset of parent
            var o = $(this).parents('.dropdown').position().left;

            // Add relative offset of .nav due to 20px padding on .navbar-inner +1px for border
            o += 21;

            // Set styles for .dropdown-menu
            $(this).css({
                width: w,
                left: -o // shift dropdown menu left (negative-sign)
            });
        });
    });
});

To apply this to a certain submenus only, add a custom class selector (e.g.: full-width) on line 2:

    $('.nav').on('mouseover', '.dropdown.full-width', function() {

Change line 7 to:

        $('.full-width .dropdown-menu').each(function() {

Apply the custom class to your menu item:

<li class="dropdown full-width">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th-large"></i>