順序付けられていないリストを2つの列に分割する最も簡単な方法

Question

CSSを使用して2列のサブメニューに順序付けされていないリストの要素を表示できますか？私はthisのようなものを実現したいが、サブメニューにはいくつかの<div>を持たない。私はthisを試してみましたが、私は2つの問題があります：彼らは（明らかに）異なる幅である場合、サブメニュー項目が整列しない

1. を、私はそれぞれの長さを知らないので、それがあるように私はそれを維持したいと思いますアイテム
2. は、私はこれらの問題を解決するにはどうすればよい
それ以上

をホバリング時に選択トップメニューを維持することはできませんか？

Answer 1

彼らは異なる幅の（明らか）である場合にsumenu項目が整列しない と私はそれがあるとして、私は、各項目の 長さを知らないのでことを維持したいと思います

ますサブメニューliのためにmin-widthを使用することができるので、コンテンツごとに整列または拡張します。

#menu_main ul li ul li{ 
    display:block; 
    margin: 0; 
    border: 1px solid red; 
    min-width: 100px; 
} 

私は、あなたのCSSに以下のように

a.active {color:#666 !important; background:white !important; border:2px solid #d5d5d5 !important; } 

をクラス.activeを定義し、スクリプトの下に試してみてください

（それが推移したときのような）トップメニュー

を選択し維持することはできません

$(document).ready(function() { 
    $(".mainop").hover(function() { 
     var $this = $(this); 
     $this.find("ul").slideDown("fast"); 
     $this.children('a:first-child').addClass('active'); 
    }, function() { 
     var $this = $(this); 
     $this.find("ul").slideUp("fast"); 
     $this.children('a:first-child').removeClass('active'); 
    }); 
}); 

DEMO

Answer 2

このjqueryプラグインcolumnizerを試してみることができます。

Answer 3

あなたは、固定幅に開いている場合は、次のようなものが働くだろう：

http://jsfiddle.net/S9t7Y/27/

#menu_main ul li ul {display:none; position: absolute; top:auto; left:auto;width: 400px;} 
#menu_main ul li ul li{float: left; display:block; width: 197px; margin: 0; border: 1px solid red;}