html - hacer - navbar bootstrap

El ancho de los enlaces de la barra de navegación Bootstrap se expande inesperadamente

Question

Tengo la siguiente navegación:

Cuando hago clic en un elemento del menú obtengo lo siguiente:

El problema es que cuando hago clic en el enlace del menú. El contenedor de enlace hereda el ancho del menú desplegable. ¿Hay alguna forma de que pueda desactivar esto con una solución de CSS pura?

Estoy usando bootstrap 3.4.

La idea de mi navegación es que los menús desplegables aumenten la altura del div de navegación. Al establecer el menú desplegable en posición: relativo. El elemento del menú principal hereda su ancho. Estoy confundido por qué haría esto. ¿Hay alguna forma de prevenir esto?

Gracias por adelantado. Avíseme si necesita más detalles.

Aquí hay un jsFiddle.

Aquí está el marcado actual:

<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

En lugar de position: relative; agregar position: absolute; a la clase .dropdown-menu

ul.dropdown-menu {
  position: absolute;
}

Manifestación

Answer 2

Intente agregar un width conjunto al elemento padre <li> . Esto debería evitar que herede el ancho de un niño <ul>

JsFiddle

Answer 3

.. he actualizado la respuesta eche un vistazo a este Plunker para lograr lo que mencionas utilizar este CSS

código

.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;}

Espero que esto solucione tu problema

Answer 4

Si quieres usar JQUERY, esto funciona como quieras.

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)
});

Por cierto, tendrá que escribir su off-focus para configurarlo como quiera que se comporte.

Answer 5

Aquí está el comportamiento requerido.

http://jsfiddle.net/vwfe6vh1/

Por favor, avíseme si omito algún punto que haya mencionado.

¿Qué he cambiado? Por favor encuentre en mis comentarios inine

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;
}

Gracias

Answer 6

Simplemente puede hacer esto conservando el ancho del elemento de anclaje alternante entre las llamadas a eventos desplegables:

$(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)
  })
});

IMPORTANTE : Tenga en cuenta que esta solución solo funciona para Bootstrap v3.3.6 y posteriores, ya que había un error en la propiedad relacionada con el destino en v3.3.5 y siguientes.

Answer 7

Cualquier elemento que sea absoluto y dentro de un contenedor relativo, heredaría su ancho del contenedor relativo. es decir, el ancho relativo del contenedor sería el 100% para el contenedor absoluto. La única manera en que puede cambiar el comportamiento de arranque predeterminado es cambiando la posición del contenedor a estática y dando la posición relativa al contenedor cuyo ancho desea heredar para el menú desplegable.