ドロップリストのマルチパネル化

Question

私のウェブサイトhttp://animevoters.apphb.comをご覧ください。メインメニューの[タグ]をクリックします。それは長すぎます。私はいくつかのウェブサイトを見たことがあります。espn.comのように、ドロップリストがパネルにあり、アイテムがそこにきれいに並べられています。私が望むのは、そのようなアイデアに沿ったものです。ドロップリストを複数のパネル（2つまたは3つのようなもの）にして、アイテムが画面を越えて移動する必要がないようにしています。どのようにこれを行うことができますか？ありがとうございました。

Btw、私は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; 
}