如何在父网格下拉列表中右侧弹出bootstrap子下拉列表？

Question

你能帮我解决这个问题：

https://plnkr.co/edit/ZDVUBAxMEFnoGV6GfL88?p=info

  

不确定为什么plunker预览视图没有显示内容。请打开一个新的   通过单击预览视图中的右上方按钮来显示窗口   东西。

<div id="wrapper">
  <div id="header" class="sticky shadow-after-3 clearfix">
    <header id="topNav">
      <div class="container">
        <div class="navbar-collapse pull-left nav-main-collapse collapse submenu-dark">
          <nav class="nav-main">
            <ul id="topMain" class="nav nav-pills nav-main">
              <li class="dropdown mega-menu">
                <!-- PORTFOLIO -->
                <a class="dropdown-toggle" href="#">
                    PORTFOLIO
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <div class="row">
                      <div class="col-md-5th">
                        <ul class="list-unstyled">
                          <li>
                            <span>GRID</span>
                          </li>
                          <li class="dropdown">
                            <a class="dropdown-toggle" href="#">1 COLUMN</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">SUB COLUMN 0</a></li>
                              <li><a href="#">SUB COLUMN 1</a></li>
                              <li><a href="#">SUB COLUMN 2</a></li>
                              <li><a href="#">SUB COLUMN 3</a></li>
                              <li><a href="#">SUB COLUMN 4</a></li>
                            </ul>
                          </li>
                          <li>
                            <a href="#">2 COLUMNS</a>
                          </li>
                          <li>
                            <a href="#">3 COLUMNS</a>
                          </li>
                          <li>
                            <a href="#">4 COLUMNS</a>
                          </li>
                          <li>
                            <a href="#">5 COLUMNS</a>
                          </li>
                          <li>
                            <a href="#">6 COLUMNS</a>
                          </li>
                        </ul>
                      </div>

鼠标悬停在GRID＆gt; 1 COLUMN，子列将弹出如下。但这并不像预期的那样。我希望子列显示在＆＃39; 1 COLUMN＆＃39;的右侧。请参阅随附的模拟了预期的行为。不知道如何实现，请帮助，谢谢！