Scrollable Menu with Bootstrap - Меню, расширяющее свой контейнер, когда оно не должно

Я старалсяЭтот метод (их скрипка), чтобы включить прокручиваемое меню с помощью Bootstrap, но при таком подходе прокручиваемое меню расширяет свой контейнер -играть на скрипке - Меню без прокрутки, правильно, не делает этого.

Как я могу это исправить? Предложения по другим подходам, совместимым с Bootstrap, также приветствуются!

Для справки, вот HTML из первого методас скрипкой:


    
        <a class="icon-key icon-white" data-toggle="dropdown" href="#" style="font-weight: bold"></a>

        
            
                
            
        

        
            
                
                    <a href="#"> My Groups</a>
                

                
                    
                        
                            
                                <a href="#">User</a>
                            

                            
                                <a href="#">Administrators</a>
                            

                            
                                <a href="#">Some Other Group</a>
                            
                        
                    

                    
                        
                    
                
            
        

        
            
                
            
        

        
            
                
                    <a href="#"> My Roles</a>
                

                
                    
                        
                            
                                <a href="#">Core Users</a>
                            

                            
                                <a href="#">Admin</a>
                            

                            
                                <a href="#">Some Other Role</a>
                            
                        
                    

                    
                        
                    
                
            
        

        
            
                
            
        

        
            
                <a href="#"> </a>
            
        
    

И CSS:

/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
    position:relative;
    display:inherit!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -moz-overflow-scrolling:touch;
    -ms-overflow-scrolling:touch;
    -o-overflow-scrolling:touch;
    overflow-scrolling:touch;
    top:0!important;
    left:0!important;
    width:100%;
    height:auto;
    max-height:500px;
    margin:0;
    border-left:none;
    border-right: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
}

Ответы на вопрос(6)

Ваш ответ на вопрос