Question

请访问我的网站http://animevoters.apphb.com。单击主菜单中的标签。太长了。我见过一些网站，比如espn.com，其中droplist在一个面板中，所以这些项目安排得非常好。我想要的是这种想法，有点像使用drop-list多面板（比如两个或三个），这样物品就不必超出屏幕了。关于如何做到这一点的任何建议？谢谢。

顺便说一下，我正在使用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;  
}

制作droplist多面板

1 个答案: