親liよりも広い流体サブメニュー| wp_nav_menu

Question

wp_nav_menuを使用すると、Wordpressは管理しやすい素敵なナビゲーションを作成します。現在のところ、ナビゲーションにはサブメニューとサブメニューがあります。リンク2にカーソルを合わせると大きなサブメニューが開き、5つのサブメニューとその下のサブメニューが表示されます（このようにしてメニューの下に表示されます）。

元のメニューとJSFiddle例 http://jsfiddle.net/tSLqV/1/

通常.SUBメニューはpostionあろう：それはいくつかの要素をオーバーハングする必要があるため、絶対。しかし何らかの理由でjsfiddleが.sub.menuをこのように正しく表示しない。したがって、この例ではposition：relativeです。私はそれが問題だどの部分 http://jsfiddle.net/HYBA7/5/

=====

のために働いてしまった

=====

JSFiddle例？ 私はサブサブメニューを含むサブメニューを表示することができますが、私はそれが流動的であることを望みます。サブサブメニューが収まらない場合、それは他のサブサブメニューの下にfloat：left;サブメニューの高さが調整されます。

通常、私はこれを行います： 最大幅：940px; 幅：100％;

問題は、このulがネストされていることです。 100％を使用すると、liの親のためにすべての要素が25％で表示されます。なぜそれが2番目のJSFiddleで動作しているのか分かりません。

次に、私はulに400％の幅を与えることを考えました（4 x 25％が100％になります）。私は別のアプローチを探していた、このUL李UL李UL李の混乱で2日間過ごした後

=====

。もし私がそれらすべてのul liを取り除くことができたら？代わりにdivを使用します（これが良い方法であるかどうかはわかりません）。そして、divは親の幅にその問題を持たないでしょうか？ Wordpress Codexを見ると、最初のulを削除していくつかのクラスを変更することが可能であることがわかりましたが、それはそれです。

メニュー項目に条件付きクラスを追加することでパート4.7についてわかりません。まだul liがあり、幅は親ul liの内容に依存するためです。

私はWalkersについて読んだことがありますが、div要素でul.sub-menuを変換することはできませんでした。

=====

私はそれがsubsubmenusでちょうどそれらの5つのサブメニューで、余分なメニューをロードし、それはjQueryのでスライドさせることが可能です知っているが、私はジャバスクリプトの助けを借りずにそれを使用したいとそれはCSSだけにする。

誰でもこの問題を解決できますか？

Answer 1

いいえ、私はサブメニューの流体を作ることができました。

各サブメニューにクラス（レベル0、レベル1）を追加するウォーカーが見つかりました。

class UL_Class_Walker extends Walker_Nav_Menu { 
    function start_lvl(&$output, $depth) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n"; 
    }  
} 

次に、私は400％のアイデアで再び作業しました。必要だったのは、左のプロパティも％で値を必要としていたことだけでした。だから私は（そこに4つの親メニュー項目があるため - と、それは完全なメニュー上に位置合わせする必要があります）この-100％を作った

li#menu-item-23 ul.level-0 { 
position: absolute; 
display: none; 
/*width: 940px;*/ 
max-width: 960px; 
width: 400%; 
left: -100%; 
background: #fff; 
z-index: 100; 

}

がIEの後半でそれをテストしますが、FirefoxとSafariのすべてを適切に表示します。