如何創建多列下拉菜單？

我想在CSS中創建一個下拉菜單，但它將有大約21個子項目。因此，我想在7列的3列中展示它們，但我無法弄清楚如何去做。如何創建多列下拉菜單？

我用一個簡單的例子創建了一個jsFiddle，我如何修改CSS以使子6-10顯示在子1-5的右側，而不是如下所示？

它應該看起來像下圖，它是在MS Paint中創建的。

編輯：

enter image description here

<nav> 
    <ul> 
    <li> 
     <a href="#">Top Level Group</a> 
     <div> 
     <ul> 
     <li><a href="#">Sub One</a></li> 
     <li><a href="#">Sub Two</a></li> 
     <li><a href="#">Sub Three</a></li> 
     <li><a href="#">Sub Four</a></li> 
     <li><a href="#">Sub Five</a></li> 
     </ul> 
     <ul> 
     <li><a href="#">Sub Six</a></li> 
     <li><a href="#">Sub Seven</a></li> 
     <li><a href="#">Sub Eight</a></li> 
     <li><a href="#">Sub Nine</a></li> 
     <li><a href="#">Sub Ten</a></li> 
     </ul> 
     </div> 
    </li> 
    </ul> 
</nav>

來源

2014-09-03 user184994

我們可以鏈接到jsFiddle嗎？ – 2014-09-03 18:29:24

請分享你的代碼你做了什麼如此之快...嘗試使用jsfiddle.net創建代碼演示並共享！這將會更有幫助！ – UID 2014-09-03 18:29:44

對不起，我忘了鏈接，我只是編輯我的帖子，包括 – user184994 2014-09-03 18:30:12

使用可以使用float: left使他們堆放

工作樣本：http://jsfiddle.net/07spd07b/2/

#top-level-group{ 
    width: 200px; 
} 
#top-level-group ul{ 
    float: left; 
}

在示例中，我將原始位置從-9999px更改爲左側，以便在打開jsfiddle時可以看到它。根據您要放入的內容設置寬度。如果你想要更多的列給它更多的寬度。

UPDATE

這裏是3列的工作樣品和clearfix包括：

http://jsfiddle.net/07spd07b/10/

我添加類clearfix：

.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; } 
.clearfix:after { 
    clear: both; } 
.clearfix { 
    zoom: 1; }

它清除漂浮元素和設置width: 250px;以適合3列。希望能幫助到你。

來源

2014-09-03 18:33:46

寬度應該增加，以允許第三列，但這個工程太棒了！ – bobbyg603 2014-09-03 18:36:20

哦，對不起，忘了他想要3列 – 2014-09-03 18:36:56

完美的感謝，我曾嘗試過'float：left'，但從來沒有想過設置父母的寬度！仍然很多學習 – user184994 2014-09-03 18:37:42

它可以很容易地通過使用display:inline-block;完成：

nav ul li ul{ 
display:inline-block; 
margin: 0; 
padding: 0; 
}

然後你只需要給DIV的寬度：

nav ul li div { 
position: absolute; 
left: -9999px; 
width:300px; 
}

JSFiddle Demo
要添加更多的列，只是讓更多<ul>'s並將寬度設置得更寬。

來源

2014-09-03 18:35:09

請現在檢查這個鏈接..我已經添加了兩個類<ul>標籤和樣式。

http://jsfiddle.net/07spd07b/

來源

2014-09-03 18:37:52 ram

如何創建多列下拉菜單？

回答

相關問題