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

时间:2014-01-22 14:26:46

标签: javascript jquery html css

根据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,4cate5,6,7enter image description here

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

最好的解决方案是为每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。