三层下拉菜单

Question

是否可以使用css bootstrap重新创建这种菜单样式我正在使用bootstrap到目前为止我只有两个标签和下拉列表的顶部栏。我还看到显示一个下拉列表，如您看到的管理员链接以及设置cog。

蓝色图标按钮应该下降到最后一项。我已经在pastbin上发布了我的初始代码，因为这里的编辑器将它们变成了元素。有人可以告诉我如何阻止这种情况发生。

代码

  <div class="navbar-inner">
    <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
                        <li><a href="#"  class="dropdown-toggle" data-toggle="dropdown">Cassed Dimensions Portal</a></li>
                        <li><a href=""  class="dropdown-toggle" data-toggle="dropdown">Configruation Items</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Latest Products</a></li>
                                <li><a href="#">Popular Products</a></li>
                            </ul>
                        </li>          
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Personal Membership</a></li>
                                <li><a href="#">Premium Membership</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Offers</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                            </ul>
                        </li>
                    </ul>



     <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
                </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->