jQuery菜单目标-子菜单不能正常工作

Question

根据这个插件的说法，以下是我尝试过的：

<div class="container">
  <div class="nav-collapse collapse">
    <ul class="nav">
      <li class="active"> <a data-toggle="dropdown" href="#">Explore the Monkeys</a>
        <ul class="dropdown-menu" role="menu">
          <li data-submenu-id="submenu-1"> <a href="#">Department1</a>
            <div id="submenu-1" class="popover">
              <!--<h3 class="popover-title">Category1</h3> -->
              <div class="popover-content">
                <ul>
                  <li>cate1</li>
                  <li>cate2</li>
                  <li>cate3</li>
                  <li>cate4</li>
                  <li>cate5</li>
                  <li>cate6</li>
                  <li>cate7</li>
                </ul>
              </div>
            </div>
          </li>
          <li data-submenu-id="submenu-4"><a href="#">Department4</a></li>
          <li data-submenu-id="submenu-5"><a href="#">Department5</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这是CSS：

    .popover {
        width: 400px;
        -webkit-border-top-left-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        overflow: hidden;   
    }
    .popover-content {
        text-align: center;
    }
    .dropdown-menu {
        -webkit-border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    }

问题：Department1的子菜单只显示cate1,2,3,4和cate5,6,7。

​

任何人都知道，我怎样才能像亚马逊导航菜单一样在cate5,6,7的右边显示cate1,2,3,4。

Answer 1

最好的解决方案是为每x个孩子添加一个新的ul。因此：

<ul class="main">
    <li>
        <ul>
            <li>cate 1</li>
            <li>cate 2</li>
            <li>cate 3</li>
            <li>cate 4</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>cate 5</li>
            <li>cate 6</li>
            <li>cate 7</li>
            <li>cate 8</li>
        </ul>
    </li>
</ul>

当然，css很简单：

ul.main > li{
    float: left;
}

把一个列表分解成这样的css是可能的，但是会非常麻烦。

Answer 2

提供小提琴会有很大帮助！

至于如何解决此问题，请添加：

.popover-content {
   text-align: center;
   height: 100%
}