Bootstrap navbar links width expanding unexpectedly

Question

I have the following navigation:

When I click on a menu item I get the following:

The problem is that when I click the menu link. The link container is inheriting the width of the dropdown menu. Is there anyway I can disable this with a pure css solution?

I'm using bootstrap 3.4.

The idea of my navigation is for the drop-down menus to increase the height of the navigation div. By setting the dropdown menu to position:relative. The parent menu item inherits it's width. I'm confused by why it would do this. Is there a way to prevent this?

Thanks in advance. Let me know if you need any more details.

Here is a jsFiddle.

Here is the current markup:

<ul class="nav navbar-nav navbar-right">
        <li class="first expanded dropdown menu-4929 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4929 active" data-toggle="dropdown">About Us</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4936 active"><a href="/" title="" class="menu-4936 active">The Museum</a></li>
                <li class="leaf menu-4937 active"><a href="/" title="" class="menu-4937 active">The Design</a></li>
                <li class="leaf menu-4938 active"><a href="/" title="" class="menu-4938 active">Our Team</a></li>
                <li class="last leaf menu-4939 active"><a href="/" title="" class="menu-4939 active">Work Opportunities</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4930"><a href="/the-collection" title="" data-target="#" class="dropdown-toggle menu-4930" data-toggle="dropdown">Collection</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4943 active"><a href="/" title="" class="menu-4943 active">Steam Launches</a></li>
                <li class="leaf menu-4942 active"><a href="/" title="" class="menu-4942 active">Sailing Boats</a></li>
                <li class="leaf menu-4941 active"><a href="/" title="" class="menu-4941 active">Motorboats</a></li>
                <li class="leaf menu-4940 active"><a href="/" title="" class="menu-4940 active">Racing Boats</a></li>
                <li class="leaf menu-4944 active"><a href="/" title="" class="menu-4944 active">Other Boats</a></li>
                <li class="last leaf menu-4945 active"><a href="/" title="" class="menu-4945 active">Conservation</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4931"><a href="/collection" title="" data-target="#" class="dropdown-toggle menu-4931" data-toggle="dropdown">What's On</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4946 active"><a href="/" title="" class="menu-4946 active">Today</a></li>
                <li class="leaf menu-4947 active"><a href="/" title="" class="menu-4947 active">Next 7 Days</a></li>
                <li class="last leaf menu-4948 active"><a href="/" title="" class="menu-4948 active">Next 30 Days</a></li>
            </ul>
        </li>
        <li class="expanded dropdown menu-4932 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4932 active" data-toggle="dropdown">Support us</a>
            <ul class="dropdown-menu dropdown-menu-left">
                <li class="first leaf menu-4949 active"><a href="/" title="" class="menu-4949 active">Build the Museum</a></li>
                <li class="leaf menu-4950 active"><a href="/" title="" class="menu-4950 active">The Jetty Appeal</a></li>
                <li class="last leaf menu-4951 active"><a href="/" title="" class="menu-4951 active">One Million for the Museum</a></li>
            </ul>
        </li>
        <li class="leaf menu-4933 active"><a href="/" title="" class="menu-4933 active">News</a></li>
        <li class="leaf menu-4934 active"><a href="/" title="" class="menu-4934 active">Blog</a></li>
        <li class="last leaf menu-4935 active"><a href="/" class="menu-4935 active"><span class="icons-search"></span><span class="icons-search-red"></span>Search</a></li>
    </ul>

Answer 1

Instead of position: relative; add position: absolute; to .dropdown-menu class

ul.dropdown-menu {
  position: absolute;
}

Demo

Answer 2

Try adding a set width to you parent <li> element. This should prevent it from inheriting the width of a child <ul>

JsFiddle

Answer 3

.. i updated the answer take a look at this Plunker to achieve as you mention use this css

code

.dropdown-menu {
    position: relative;
z-index: 1000; 
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{width:120px;margin-left:0px;}

.test{width:115px;}

hope you this will solve your problem

Answer 4

If you want to use JQUERY this works like you want.

http://jsfiddle.net/Dhanck/sgwpLx5v/10/

$('.expanded').click(function(event) {
event.preventDefault();
$('.dropdown-menu-left').css('position', 'absolute');
console.log('position absolute');
setTimeout(function(){
console.log('menu clicked');
//Get the height of the UL nested and add the size of nav + the bottom margin
var navheight = $('.open .dropdown-menu-left').height() + 52 + 20;
console.log(navheight);

$('.navbar').height(navheight);
console.log('set height');

}, 0)
});

BTW You'll have to write your off-focus to set it how ever you want it to behave.

Answer 5

You can simply do this by preserving the width of the toggling anchor element between the dropdown event calls:

$(document).ready(function () {
  var anchorWidth = 0
  $('.dropdown').on('show.bs.dropdown', function (e) {
    // e.relatedTarget is the toggling anchor element
    anchorWidth = $(e.relatedTarget).width()
  })
  $('.dropdown').on('shown.bs.dropdown', function (e) {
    $(e.relatedTarget).width(anchorWidth)
  })
});

IMPORTANT : Please note that this solution only works for Bootstrap v3.3.6 and above since there was a bug in the relatedTarget property in v3.3.5 and below.

Answer 6

Here is the required behavior.

http://jsfiddle.net/vwfe6vh1/

Please let me know if I miss any point you mentioned.

What I changed ? Please find in my inine comments

 ul.dropdown-menu { /* Position Relative always respect its parent */ position: absolute; /* If not Auto Horizontal scrollbar will come up */ overflow-x: auto; /* If not Auto menu items will cropped if overflow-x set as hidden */ width: auto; /* No change*/ height: auto; margin: 0; border: none; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; /* To remove space above each drop down*/ padding-top:0; } 

Thankyou

Answer 7

Any element that is absolute and within a relative container, would inherit its width from the relative container. ie the relative container width would be the 100% for the absolute container. The only way you can change the default bootstrap behavior is by changing the container position to static and giving the position relative to the container whose width you want to inherit for the drop down.