jQuery的菜单目标 - 子菜单没有正常工作

据this plugin，这里是我曾尝试：jQuery的菜单目标 - 子菜单没有正常工作

<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

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

来源

2014-01-22 Nothing

根据您的需求，您可以尝试https://developer.mozilla.org/en-US/docs/Web/CSS/column-count。 –

所以美食5,6,7应该是美食1-4列表的一部分，但在其右侧，正确吗？ –

@AndrewIce：是的，你说得对。 – Nothing

最好的解决办法是添加一个新的UL为孩子的每x量。因此：

<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。

来源

2014-01-22 15:47:24

我看到......但在这个静态列表后，我将用动态数据更改这些数据，因此添加新的ul对我来说有点问题。 – Nothing

根据你添加元素的方式，你可以使用你的服务器代码或JavaScript，甚至是两者的混合物来抓取每个4项，并用你收到的4个菜单项创建一个新的li和ul。 –

噢好吧，我会尝试一下，让你知道它是否正在解决。谢谢。 – Nothing

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

至于如何可以通过添加解决此问题：

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

来源

2014-01-22 14:34:10

没有解决这个解决方案。 – Nothing

我试图设置这个http://jsfiddle.net/3S2JP/，但它没有工作：/ – Nothing

有更多关联的CSS？您将需要：P –

jQuery的菜单目标 - 子菜单没有正常工作

回答

相关问题