Выпадающее меню по всей ширине

/** 
 * BOOTSTRAP DROPDOWN JS 
 */ 
 
+function ($) { 
    'use strict'; 
 
    // DROPDOWN CLASS DEFINITION 
 
    var backdrop = '.dropdown-backdrop' 
    var toggle   = '[data-dropdown]' 
    var Dropdown = function (element) { 
        $(element).on('click.bs.dropdown', this.toggle) 
    } 
 
    function getParent($this) { 
        var selector = $this.attr('data-target') 
 
        if (!selector) { 
            selector = $this.attr('href') 
            selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 
        } 
 
        var $parent = selector && $(selector) 
 
        return $parent && $parent.length ? $parent : $this.parent() 
    } 
 
    function clearMenus(e) { 
        if (e && e.which === 3) return 
        $(backdrop).remove() 
        $(toggle).each(function () { 
            var $this         = $(this) 
            var $parent       = getParent($this) 
            var relatedTarget = { relatedTarget: this } 
 
            if (!$parent.hasClass('open')) return 
 
            if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return 
 
            $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) 
 
            if (e.isDefaultPrevented()) return 
 
            $this.attr('aria-expanded', 'false') 
            $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget)) 
        }) 
    } 
 
    Dropdown.prototype.toggle = function (e) { 
        var $this = $(this) 
 
        if ($this.is('.disabled, :disabled')) bledreturn 
 
        var $parent  = getParent($this) 
        var isActive = $parent.hasClass('open') 
 
        clearMenus() 
 
        if (!isActive) { 
            if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) { 
                // if mobile we use a backdrop because click events don't delegate 
                $(document.createElement('div')) 
                    .addClass('dropdown-backdrop') 
                    .insertAfter($(this)) 
                    .on('click', clearMenus) 
            } 
 
            var relatedTarget = { relatedTarget: this } 
            $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget)) 
 
            if (e.isDefaultPrevented()) return 
 
            $this 
                .trigger('focus') 
                .attr('aria-expanded', 'true') 
 
            $parent 
                .toggleClass('open') 
                .trigger($.Event('shown.bs.dropdown', relatedTarget)) 
        } 
 
        return false 
    } 
 
    Dropdown.prototype.keydown = function (e) { 
        if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return 
 
        var $this = $(this) 
 
        e.preventDefault() 
        e.stopPropagation() 
 
        if ($this.is('.disabled, :disabled')) return 
 
        var $parent  = getParent($this) 
        var isActive = $parent.hasClass('open') 
 
        if (!isActive && e.which != 27 || isActive && e.which == 27) { 
            if (e.which == 27) $parent.find(toggle).trigger('focus') 
            return $this.trigger('click') 
        } 
 
        var desc = ' li:not(.disabled):visible a' 
        var $items = $parent.find('.dropdown-block' + desc) 
 
        if (!$items.length) return 
 
        var index = $items.index(e.target) 
 
        if (e.which == 38 && index > 0)                 index--         // up 
        if (e.which == 40 && index < $items.length - 1) index++         // down 
        if (!~index)                                    index = 0 
 
        $items.eq(index).trigger('focus') 
    } 
 
 
    // DROPDOWN PLUGIN DEFINITION 
    // ========================== 
 
    function Plugin(option) { 
        return this.each(function () { 
            var $this = $(this) 
            var data  = $this.data('bs.dropdown') 
 
            if (!data) $this.data('bs.dropdown', (data = new Dropdown(this))) 
            if (typeof option == 'string') data[option].call($this) 
        }) 
    } 
 
    var old = $.fn.dropdown 
 
    $.fn.dropdown             = Plugin 
    $.fn.dropdown.Constructor = Dropdown 
 
 
    // DROPDOWN NO CONFLICT 
    // ==================== 
 
    $.fn.dropdown.noConflict = function () { 
        $.fn.dropdown = old 
        return this 
    } 
 
 
    // APPLY TO STANDARD DROPDOWN ELEMENTS 
    // =================================== 
 
    $(document) 
        .on('click.bs.dropdown.data-api', clearMenus) 
        .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
        .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle) 
        .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown) 
        .on('keydown.bs.dropdown.data-api', '.dropdown-block', Dropdown.prototype.keydown) 
 
}(jQuery);

.header-middle .base-nav { 
    border: 1px solid #e8e8e8; 
    border-bottom: none; 
} 
.header-middle .base-nav > ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.header-middle .base-nav > ul:after { 
    display: table; 
    content: ''; 
} 
.header-middle .base-nav > ul > li.base-nav-btn { 
    display: table-cell; 
    width: 12.5%; 
} 
.header-middle .base-nav > ul > li.open { 
    border-top: 3px solid #e74c3c; 
    background: #fff; 
    border-right: 1px solid #e8e8e8; 
    border-left: 1px solid #e8e8e8; 
} 
.header-middle .base-nav > ul > li.base-nav-btn > a { 
    height: 100px; 
    padding: 15px; 
    text-decoration: none; 
    color: #333; 
    display: block; 
    text-align: center; 
    font-size: 12px; 
} 
.header-middle .base-nav > ul > li.base-nav-btn > a:hover { 
    background: #fff; 
    border-right: 1px solid #e8e8e8; 
    border-left: 1px solid #e8e8e8; 
} 
.header-middle .base-nav > ul > li.base-nav-btn > a > .img-container { 
    text-align: center; 
    margin-bottom: 10px; 
} 
.header-middle .base-nav > ul > li.base-nav-btn > a > .img-container > img { 
    height: 35px; 
    width: auto; 
} 
.header-middle .base-nav > ul > li.open > a > .base-subnav { 
    width: 100%; 
    display: inline-block; 
} 
 
 
/*=========== BOOTSTRAP DROPDOWN ==============*/ 
.dropdown-block { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<div class="header-middle"> 
    <div class="hp-container"> 
       
      <!-- Тут лого поиск и тд --> 
       
      <!-- BASE NAV --> 
      <section class="base-nav"> 
        <ul> 
          <li class="base-nav-btn dropdown"> 
            <a href="javascript:void(0);" data-dropdown> 
              <div class="img-container"> 
                <img src="assets/img/b_nav1.png" alt="image" /> 
              </div> 
              <div class="base-nav-text">Компьютеры</div> 
              <div class="dropdown-block base-subnav"> 
                <ul> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                </ul> 
              </div> 
            </a> 
          </li> 
          <li class="base-nav-btn dropdown"> 
            <a href="javascript:void(0);" data-dropdown> 
              <div class="img-container"> 
                <img src="assets/img/b_nav2.png" alt="image" /> 
              </div> 
              <div class="base-nav-text">Телефоны и связь</div> 
              <div class="dropdown-block base-subnav"> 
                <ul> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                  <li>asdsa</li> 
                </ul> 
              </div> 
            </a> 
          </li> 
        </ul> 
      </section> 
      <!-- END BASE NAV --> 
    </div> 
  </div>