The MIER Navigation bar so far
<code>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#"><img src="<$mt:BlogURL$>images/mier-logo-small.png" alt="MIER Logo" class="logo-nav" /></a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="<$mt:BlogURL$>">Home</a></li>
<mt:Entries include_blogs="children" tag="@WELCOME" limit="1">
    <li><a href="<$mt:EntryPermalink encode_html="1"$>">Welcome</a></li>
</mt:Entries>
<mt:Entries include_blogs="children" tag="@ABOUTUS" limit="1">
    <li><a href="<$mt:EntryPermalink encode_html="1"$>">About Us</a></li>
</mt:Entries>
<mt:Entries include_blogs="all" tag="@CONTACT" limit="1">
    <li><a href="<$mt:EntryPermalink encode_html="1"$>">Contact Us</a></li>
</mt:Entries>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
     <ul class="dropdown-menu multi-level">
      <li class="dropdown-submenu">
       <a href="<$mt:BlogURL$>surveys/" class="dropdown-toggle" data-toggle="dropdown">MIER Surveys</a>
       <ul class="dropdown-menu multi-level">
        <li class="dropdown-submenu">
         <a href="<$mt:BlogURL$>bci/" class="dropdown-toggle" data-toggle="dropdown">BCI</a>
         <ul class="dropdown-menu">
         <li><a href="<$mt:BlogURL$>bci/">BCI Page</a></li>
<mt:Entries include_blogs="all" tag="@LATESTBCI" limit="1">
          <li><a href="<$mt:EntryPermalink encode_html="1"$>">Latest BCI</a></li>
</mt:Entries>
         </ul>
        </li>
        <li class="dropdown-submenu">
         <a href="<$mt:BlogURL$>csi/" class="dropdown-toggle" data-toggle="dropdown">CSI</a>
         <ul class="dropdown-menu">
          <li><a href="<$mt:BlogURL$>csi/">CSI Page</a></li>
<mt:Entries include_blogs="all" tag="@LATESTCSI" limit="1">
          <li><a href="<$mt:EntryPermalink encode_html="1"$>">Latest CSI</a></li>
</mt:Entries>
         </ul>
        </li>
       </ul>
      </li>
      <li><a href="<$mt:BlogURL$>outlook/">Malaysian Economic Outlook</a></li>
<mt:Entries include_blogs="all" tag="@PRESENTATION" limit="1">
      <li><a href="<$mt:EntryPermalink encode_html="1"$>">MIER Presentations</a></li>
</mt:Entries>
      <li class="divider"></li>
      <li class="dropdown-submenu">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Info about us</a>
       <ul class="dropdown-menu">
<mt:Entries include_blogs="all" tag="@CHAIRMAN" limit="1">
        <li><a href="<$mt:EntryPermalink encode_html="1"$>">Chairman&#39;s Statement</a></li>
</mt:Entries>
<mt:Entries include_blogs="all" tag="@TRUSTEES" limit="1">
        <li><a href="<$mt:EntryPermalink encode_html="1"$>">Board Of Trustees</a></li>
</mt:Entries> 
       </ul>
      </li>
     </ul>
    </li>
   </ul>
   <ul class="nav navbar-nav navbar-right">
    <li class="text-muted navbar-menu-item"><i class="fa fa-phone"> Call us: (603) 2142 0091</i></li>
   </ul>  
  </div><!--/.nav-collapse -->
 </div>
</div>
</code>
with CSS
<code>
/* Multi-level dropdown menu from http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 */
.dropdown-submenu {position: relative;}
.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover>a:after {border-left-color: #fff;}
.dropdown-submenu.pull-left {float: none;}
.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}
</code>

Go back to [[bs3_multilevel-dropdown-menu|previous]] page