bootstrap 3 rwd menu

Hej,

przygotowałem fiddle https://jsfiddle.net/2rh5qho2/
w dokładnie takiej formie jakiej potrzebuję.
Kiedy zwężamy ekran menu "składa się" - dalej trzeba kliknąć w niebieski pas aby je rozwinąć.
Problem polega na zastosowanych dropdownach. Kiedy spróbujesz rozwinąć menu - owszem - rozwinie się - ale razem z środkiem dropdownów.
Chciałbym aby dropdowny były zwinięte i dopiero po kliknięciu rozwijały się - wiadomo jak to powinno działać.

// the menu
                var pull        = $('#pull');
                    menu        = $('#top-menu ul');
                    menuHeight  = menu.height();
                
                $(pull).on('click', function(e) {
                    e.preventDefault();
                    menu.removeClass('pull-right');
                    menu.slideToggle();
                });

                $(window).resize(function(){
                    var w = $(window).width();
                    if(w > 320 && menu.is(':hidden')) {
                        menu.removeAttr('style');
                        menu.find('.open').removeClass('open');
                        menu.addClass('pull-right');
                    }   
                });   

Np. dodając taką linijkę do "resize"

menu.find('.open').removeClass('open');

thx jednak to nie pomaga.
pozornie pomaga taki wpis
$('.dropdown-menu').hide();
jednak nie można z powrotem otworzyć dropdowna