Scrolling z-index iOS 7.1.2

Bonjour.

Je souhaite faire un menu déroulant pour la version mobile d'un site web (je suis passé par une solution alternative à la navbar pour pouvoir plus facilement réduire sa hauteur par exemple)

J'ai tout d'abord une barre fixe:

<div class="row" id="menu_responsive">
	<div class="col-xs-3 col-sm-2 col-md-1" id="panier_menu_responsive">
		<a href="panier.aero"><div class="glyphicon glyphicon-shopping-cart"></div></a> <span class="badge">{$QUANTITE_TOTALE|default:'0'}</span>
	</div>
 
	<div class="col-xs-3 col-sm-2 col-md-1" id="loupe_menu_responsive">	
		<a onClick="afficherBarreRecherche('barre_de_recherche')"><div class="glyphicon glyphicon-search"></div></a></span>
	</div>
 
	<div class="col-xs-offset-3 col-xs-3 col-sm-offset-6 col-sm-2 col-md-offset-9 col-md-1" id="hamburger_menu_responsive">
		<a onClick="afficherMenu('menu_deroule_responsive')"><div class="glyphicon glyphicon-menu-hamburger"></div></a>
	</div>
</div>

#menu_responsive {
		position: fixed;
		background-color: #222222;		
		height: 30px;
		margin: 0;
		padding-top:5px;
		z-index:7;
		width: 100%;
	}

...qui déroule mon menu:

div class="row" id="menu_deroule_responsive">
	<div id="content_menu_deroule_responsive">
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a href="index.aero"><div class="glyphicon glyphicon-home"></div> Accueil</a>
		</div>
		<div class="divider_line"></div>
		<div class="col-xs-12">
			<a onClick="afficher('rayons_menu_responsive')"><div class="glyphicon glyphicon-list"></div> Rayons et gammes<span class="caret"></span></a>
		</div>
                 ...
                 ...
                 ...
        </div>
</div>
 
<div class="container">    
// le contenu du site
</div>

#menu_deroule_responsive {
    display: none;
    position: absolute;
    top: 30px;
    width: 100%;
    margin: 0;
    background-color: #222222;			
    z-index: 6;
    padding-left:5px;
}
 
#content_menu_deroule_responsive {
    position: relative;
    top: 0;
    left: 0;			
}

Or lorsque je déroule mon menu et que j'essaie de scroller (avec le doigt) je vois que c'est la div container en dessous qui scrolle, et non mon menu.
J'ai lu beaucoup de solution sur le net en anglais à base de -webkit-overflow-scrolling: touch; mais ça n'a jamais fonctionné. Surement car je ne l'avais pas mis au bon endroit.

PS: le comportement voulu fonctionne bien sous Android.

J'ai donc besoin de votre aide

Merci