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的菜單目標 - 子菜單沒有正常工作

回答

相關問題