jquery - 制作下拉列表多面板

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;  
}