Codrops Horizontal drop down menu with wayfinder

<nav id="cbp-hrmenu" class="cbp-hrmenu">[[Wayfinder? &startId=`[[*id]]` &parentRowTpl=`parentRow` &categoryFoldersTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]</nav>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="[[++site_url]]"><img src="[[++assets_url]]templates/bootstrap/img/logo.png" width="90" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
[[Wayfinder?
&startId=`0`
&parentRowTpl=`parentRowTpl`
&categoryFoldersTpl=`innerTpl`
&innerRowTpl=`innerRowTpl`
]]
</nav>
</div><!--/.nav-collapse -->
</div>
</div>

<nav id="cbp-hrmenu" class="cbp-hrmenu">[[Wayfinder? &startId=`[[*id*]]` &parentRowTpl=`parentRowTpl` &categoryFoldersTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]</nav>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>

<!-- Script -->
<!-- Script Bootstrap -->
<script src="[[++assets_url]]components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Script Tooltip -->
<script>
	$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
<!-- Script Off -->
[[$YandexMetrika]]

<nav id="cbp-hrmenu" class="cbp-hrmenu"><ul><li class="first"><a href="https://jinini.com/" title="Home" >Home</a></li>
<li><a href="gallery/">Gallery</a>
    <div class="cbp-hrsub">
        <div class="cbp-hrsub-inner"> 
            <ul><div>
  <h4>Photography</h4>
    <ul>
        <ul><li>
<a href="gallery/photography/events.html" >Events</a>

</li>
<li>
<a href="gallery/photography/kids.html" >Kids</a>

</li>
<li>
<a href="gallery/photography/love-story.html" >Love Story</a>

</li>
<li>
<a href="gallery/photography/portraits.html" >Portraits</a>

</li>
<li>
<a href="gallery/photography/weddings.html" >Weddings</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>Painting</h4>
    <ul>
        <ul><li>
<a href="gallery/painting/portrait.html" >Portrait painting</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>Video</h4>
    <ul>
        <ul><li>
<a href="gallery/video/kids-video.html" >Kids</a>

</li>
</ul>                    
    </ul>
</div>
<div>
  <h4>CG graphics</h4>
    <ul>
        <ul><li>
<a href="gallery/cg/key-art.html" >Key Art</a>

</li>
</ul>                    
    </ul>
</div>
</ul>
        </div><!-- /cbp-hrsub-inner -->
    </div><!-- /cbp-hrsub -->
</li>
<li><a href="blog/" title="Blog" >Blog</a></li>
<li class="last"><a href="http://forum.jinini.com/" title="Forum" >Forum</a></li>
</ul></nav>