製作droplist多面板

Question

請參閱我的網站http://animevoters.apphb.com。點擊主菜單中的標籤。它太長了。我見過一些網站，比如espn.com，其中的下拉列表位於一個面板中，以便在那裏很好地排列項目。我想要的是沿着這種想法的東西，就像做出多個面板（如兩個或三個）的排列表，以便項目不必超出屏幕。有關如何做到這一點的任何建議？謝謝。

順便說一句，我正在使用ASP.NET MVC和JQuery。

Answer 1

使用DIV來包裝菜單面板，然後在其中使用多個列表。

見：http://jsfiddle.net/cFvpe/1/

HTML：

<div class="wrapper"> 
    <ul> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     </ul> 
    <ul> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     <li><a href="...">Menu item</a></li> 
     </ul> 
</div> 

CSS：

.wrapper { 
    background-color:#0000f0; 
    padding:4px; 
    width:220px; 
} 

.wrapper ul, .wrapper li { 
    list-style-type:none; 
    padding:0; 
    margin:0 
} 

.wrapper ul { 
    width:100px; 
    margin-right:10px; 
    float:left; 
} 

.wrapper a { 
    display:block; 
    font-family:arial; 
    text-decoration:none; 
    padding:3px; 
    font-size:12px; 
    color:#ffffff; 
    width:100px; 
    margin-bottom:2px; 
    background-color:#0000c0; 
} 

.clear { 
    clear:both; 
}