Agregar barra de desplazamiento en las opciones del menú desplegable

Question

Estoy tratando de agregar una barra de desplazamiento a las opciones del menú desplegable para que cuando el usuario haga clic en el menú no se muestren todas las opciones hasta el final. Probé

<select name='menu'> 
    <option value='1'>first item</option> 
    <option value='2'>second item</option> 
    <option value='3'>third item</option> 
    <option value='4'>fourth item</option> 
    <option value='5'>fifth item</option> 
    <option>........ 
    <option>........ 
    //I have many options..... 
</select> 

Pruebo este CSS, pero solo funciona en el menú en sí, no en las opciones.

select { 
height:50px; 
overflow-y: scroll; 
} 

¿Alguna idea? Muchas gracias.

Answer 1

Ésta es también una buena manera de handeling it :)

http://css-tricks.com/long-dropdowns-solution/

Desde el enlace de arriba:

var maxHeight = 400; $(function(){ 

$(".dropdown > li").hover(function() { 

    var $container = $(this), 
     $list = $container.find("ul"), 
     $anchor = $container.find("a"), 
     height = $list.height() * 1.1,  // make sure there is enough room at the bottom 
     multiplier = height/maxHeight;  // needs to move faster if list is taller 

    // need to save height here so it can revert on mouseout    
    $container.data("origHeight", $container.height()); 

    // so it can retain it's rollover color all the while the dropdown is open 
    $anchor.addClass("hover"); 

    // make sure dropdown appears directly below parent list item  
    $list 
     .show() 
     .css({ 
      paddingTop: $container.data("origHeight") 
     }); 

    // don't do any animation if list shorter than max 
    if (multiplier > 1) { 
     $container 
      .css({ 
       height: maxHeight, 
       overflow: "hidden" 
      }) 
      .mousemove(function(e) { 
       var offset = $container.offset(); 
       var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); 
       if (relativeY > $container.data("origHeight")) { 
        $list.css("top", -relativeY + $container.data("origHeight")); 
       }; 
      }); 
    } 

}, function() { 

    var $el = $(this); 

    // put things back to normal 
    $el 
     .height($(this).data("origHeight")) 
     .find("ul") 
     .css({ top: 0 }) 
     .hide() 
     .end() 
     .find("a") 
     .removeClass("hover"); 

}); 

// Add down arrow only to menu items with submenus 
$(".dropdown > li:has('ul')").each(function() { 
    $(this).find("a:first").append("<img src='images/down-arrow.png' />"); 
}); 

});

Answer 2

hacerle un css para su selecto como class="myDropDown" y agregue el siguiente CSS

.myDropDown 
{ 
    height: 50px; 
    overflow: auto; 
} 

para referencia: fiddle

Answer 3

<style type="text/css"> 
      /*dropdown menu code start*/ 
      @media only screen and (min-width:769px) { 
       .dropdown:hover .dropdown-menu { 
        display: block; 
       } 
       .dropdown-submenu { 
        position: relative !important; 
       } 

       .dropdown-submenu>.dropdown-menu { 
        top: 0 !important; 
        left: 100% !important; 
        margin-top: -6px !important; 
        margin-left: -1px !important; 
        border-radius: 0 !important; 
       } 

       .dropdown-submenu:hover>.dropdown-menu { 
        display: block !important; 
       } 

       .dropdown-submenu>a:after { 
        display: block; 
        content: "\f105"; 
        font-family: 'FontAwesome'; 
        margin-top: -18px; 
        right: 15px; 
        position: absolute; 
        font-weight: 300; 
       } 
       .customcaret{ 
       float: right; 
       } 
      } 
      /*dropdown menu code start*/ 

     .navbar-default .navbar-nav > li > a { 
      color: #535353; 
      transition: all ease 0.5s; 
      -webkit-transition: all ease 0.5s; 
      -moz-transition: all ease 0.5s; 
      font-size: 1.15em !important; 
      text-transform: uppercase; 
     } 
     </style>