Question

根据this plugin，以下是我的尝试：

<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。 enter image description here

任何人都知道，如何在cate5,6,7的右侧显示cate1,2,3,4，如亚马逊导航菜单。

Answer 1

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

至于如何通过添加以下内容来解决此问题：

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

Answer 2

最好的解决方案是为每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是可能的，但是非常hacky。

jQuery菜单目标 - 子菜单无法正常工作

2 个答案: