正直に言うと、文体は簡単に聞こえるが、時には多くのピットが発生しました。（参考のために脱退ビット長ったらしい、あなたは最後の2行、最終的に直接見ることができます）。
これは、メニューが問題となる表示するには、PCおよび両方のプロジェクトのためのモバイル端末になることです。
だから私は、ユーザ機器（特定のが私の他のエッセイを参照してください。判断https://www.cnblogs.com/nuonuo-D/p/10516626.htmlを）変数isMobiを設定し、（モバイル終わりがtrueの場合、PC終了値はfalseで、メニューは私がページの上部にあるPC、モバイルエンド・ショーを表示するには、ページの左側にあるように、navMenuの要素-UIを使用します）。つまり、アイデアがこれです：
？IsMobiモード=「水平」：モード=「垂直」（すなわち、移動端末：NavMenuモードが水平で、PCエンドモード垂直）
さらに、再調整に応じてCSS
まあADOは、プロジェクトの反復で、メニューは、移動端末が画面に表示することができないを持っている、オリジナルの3から6または7になりました。だから私は、スクロールバーを考えます。
もともと私は単にオーバーフロー-Xを追加すると思った：オート解決することができ、その結果が見つかりません。
いくつかの試みの後、溶液をして得られました：
コード（迅速な読み：あなたは赤のテキストを見ることができます）：
<テンプレート> の<div クラス= "サイドバーのトップ" > <EL- メニュー ：モード = "モード" ：崩壊 = "false"を-transition ：デフォルト -active = "onRoutes" Vの -bind：ルータ= "true"の 背景 -カラー= "＃1 3b3b3b" テキスト -color = "＃のFFF" ：ユニーク -opened = "true"の メニュー -trigger = "クリック" アクティブ -text色= "＃1 20a0ffを"> <テンプレート> <EL-メニュー項目のインデックス= "/インデックス"> <スパンスロット=」タイトル">首页</ span>を </ EL-メニュー項目> <テンプレート> </テンプレート> <EL-サブメニューインデックス= "1"> <テンプレートスロット= "タイトル"> の<span>一级菜单1 </ span>を </テンプレート> <EL-メニュー項目インデックス= "/ URL1">二级菜单1 </ EL-メニュー項目> </ EL-サブメニュー> </テンプレート> <テンプレート> <EL-サブメニューインデックス= "2"> <テンプレートスロット= "タイトル"> の<span>一级菜单2 < /スパン> </テンプレート> <EL-サブメニューインデックス= "2-1" ：ポッパー-追記-ボディ= "真" > <スパンスロット= "タイトル">带三级菜单的二级菜单</スパン> <EL-メニュー項目インデックス= "/ URL"> 3 1 </ EL-メニュー項目 > メニュー <EL-メニュー項目インデックス= "/ URL"> 3つのメニュー2 </ EL-メニュー項目 > </ EL-サブメニュー> <テンプレート> </ EL-サブメニュー> </テンプレート> <テンプレート> <EL-サブメニューインデックス= "3"> <テンプレートスロット= "タイトル"> の<span>一级菜单3 </スパン> </テンプレート> <EL-メニュー項目インデックス= "/ URL1">二级菜单1 </ EL-メニュー項目> <EL-メニュー項目インデックス= "/ URL2">二级菜单2 </ EL-メニュー項目> </ EL-サブメニュー> </テンプレート> <テンプレート> < EL-サブメニューインデックス= "4"> <テンプレートスロット= "タイトル"> の<span>一级菜单4 </スパン> </テンプレート> <EL-メニュー項目インデックス= "/ URL1">二级菜单1 < / EL-メニュー項目> </ EL-サブメニュー> </テンプレート> <EL-サブメニューインデックス= "5"> <テンプレートスロット= "タイトル"> <スパン>一级菜单5 </スパン> </テンプレート> <EL-メニュー項目インデックス= "/ URL1">二级菜单1 </ EL-メニュー項目> </ EL-サブメニュー> </テンプレート> <テンプレート> <EL-メニュー項目インデックス= "/ URL1"> <スパンスロット= "タイトル">一级菜单6 </スパン> </ EL-メニュー項目> </テンプレート> </ EL-メニュー> </ div> </テンプレート>
<！ - 注：設定：ポッパー-APPEND -ボディ =「true」を第三級のメニュー画面を防ぐためには、行くために外に行ってきました - >
スタイル（速い読み取り：あなたが赤のテキストを見ることができます）：
<スタイル> .sidebar - トップ{ 背景 - 色：＃1 3b3b3b。 高さ：55×; オーバーフロー - X：自動; } .sidebar -top> UL { / * 幅：840px; * // * 带アイコン的* / 幅：530px; / *不带アイコン的* / } .sidebar -top .ELメニュー-水平> .EL-メニュー- 項目{ 高さ：55×。 行 - 高さ：55×; } .sidebar -top .ELメニュー-水平> .EL-サブメニュー.el- submenu__title { 高さ：55×。 ライン -高さ：55×; } .sidebar -top .EL-サブメニュー.EL-メニュー- 項目{ 分 - 幅：160ピクセル。 } .sidebar -top .ELメニュー-崩壊.EL-メニュー.EL-サブメニュー、.EL-menu-- ポップアップ{ 分 - 幅：100pxに。 } .EL -submenu__icon- 矢印{ マージン -top： - 4PX。 } .EL -submenu .EL-メニュー- 項目{ 分 - 幅：80px; } .iconfont { フォント - サイズ：20ピクセル。 } </スタイル>
概要：私は無意識のうちに（コードが効果を確認するために直接コピーすることができます）、総合ポイントをすることができ、物事を言うので、コードは、たくさん入れ、それだけでいくつかの重要なポイント、合理化するだけでは十分ではありません。
1.elメニューの親コンテナプラス属性：オーバーフロー-X：自動;
2.elメニューが良いの幅を提供し、この幅は約すべての二次メニューと幅の大きさであります