Выпадающее меню - Вопросы по CSS

 <!-- Burger pos -->
<?php if ($this->countModules('burger')) : ?>
<nav class="navigation" role="navigation">
<div class="navbar pull-left">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#VMmenu".$ID">
<span class="sr-only">Каталог</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="nav-collapse" id="<?php echo "VMmenu".$ID ?>">
<jdoc:include type="modules" name="burger" style="themeHtml5" />
</div>
</nav>
<?php endif; ?>

$(document).ready(function() {
  $('.btn btn-navbar').click(function (event) {
    $('.btn btn-navbar,.<?php echo "VMmenu".$ID ?>').toggleClass('active');
    $('body').toggleClass('lock');
  });

  id="<?php echo "VMmenu".$ID ?>">

.lock .nav-collapse {display: block;}

.nav-collapse {display: none;}

.lock .nav-collapse {display: block;}

.nav-collapse {display: none;}

 $('.btn btn-navbar,.<?php echo "VMmenu".$ID ?>').toggleClass('active');

$(document).on('click', function(e) {
  if (!$(e.target).closest(".parent_block").length) {
    $('.toggled_block').hide();
  }
 e.stopPropagation();
});

<!-- Burger pos -->
<?php if ($this->countModules('burger')) : ?>
	<nav class="navigation" role="navigation">
		<div class="navbar pull-left">
			<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#VMmenu".$ID">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>
		</div>
		<div class="nav-collapse" id="<?php echo "VMmenu".$ID ?>">
			<jdoc:include type="modules" name="burger" style="themeHtml5" />
		</div>
	</nav>
<?php endif; ?>

.nav-collapse.collapse {
  height: auto;
  overflow: hidden;
} 
nav.navigation {
  background: #211f22;
}
.nav-collapse {
    clear: both;
    height: 0;
    overflow: hidden;
}