using top horizontal menu of default-bootstraps into a customized theme and putting sub menus

[fkaus]

Hi, 

 

the link to my website is: 

 

 

 

i need to use the default-bootsrtaps menu bar found here:  and use it on my website

 

please see the image attached on how the menu should be.

 

here are the code of my customized theme so far in the blocktopmenu.tpl

 

{if 0 && $MENU != ''}
<!-- Menu -->
<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
<div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
<ul class="sf-menu clearfix menu-content">
{$MENU}
{if $MENU_SEARCH}
<li class="sf-search noBack" style="float:right">
<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
<p>
<input type="hidden" name="controller" value="search" />
<input type="hidden" value="position" name="orderby"/>
<input type="hidden" value="desc" name="orderway"/>
<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
</p>
</form>
</li>
{/if}
</ul>
</div>
<!--/ Menu -->
{/if}
{if $MENU != ''}
<!-- Menu -->
<ul class='ribbon'>
            <div class="menu-cat-sm">{l s="Categories" mod="blocktopmenu"}<span class="menu-cat-toggle"><span class="glyphicon glyphicon-menu-hamburger" onclick="$('.ribbon-content').slideToggle();"></span></span></div>
            <span class="ribbon-content">
                {$MENU}
               
            </span>
        </ul>
<!--/ Menu -->
{/if}

I have created the submenus as shown in the other picture attached.

 

Can someone please help.

 

Thank you.

Edited September 23, 2015 by fk_0786 (see edit history)

[fkaus]

Anyone to help please?

[fkaus]