2017-11-08 12 views
0

3番目のメニューオプションは、2番目のオプションを選択した場合にのみ表示されますが、最初のオプションを選択すると表示されます。私はまだCSSとドロップダウンメニューに問題があります

、下記のリンクでは、エラーが表示さトップメニューに移動し、オプション「LocalizarPeças」を選択するには ->「GM(シボレー)」、3番目のメニューがすでに表示されますが、選択したときのみ表示されます例えば、"Agile"のようなオプションの1つ。

http://adessopecas.com.br/index.php?route=common/home

私のCSSは次のとおりです。HTMLで

#menu .dropdown:hover > .dropdown-menu { 
    display: block; 
} 
#menu ul ul ul.dropdown-inner { 
    left: 100%; 
    top: 0; 
    display: none; 
} 
#menu .nav li { 
    position: relative; 
} 
#menu ul ul li:hover ul.dropdown-inner { 
    display: block; 
} 


#list-unstyled ul ul ul.dropdown-inner2 { 
    left: 100%; 
    top: 0; 
    display: none; 
} 
#list-unstyled .nav li { 
    position: relative; 
} 
#list-unstyled ul ul li:hover ul.dropdown-inner2 { 
    display: block; 
} 

Liは次のとおりです。

<ul class="dropdown-menu sub-menu dropdown-inner"> 
    <li>Option 1-1</li> 
     <ul class="dropdown-menu sub-menu dropdown-inner2"> 
      <li>Option 1-1</li> 
      <li>Option 1-1</li> 
      <li>Option 1-1</li> 
     </ul> 
    <li>Option 2-1</li> 
    <li>Option 3-1</li> 
</ul> 
+2

#menu ul li:hover > ul { display: block; } 

そして取り除きます。 – Mik3NL

+0

サンプルコードで編集しました。 – Anderson

答えて

2

それはこのルールのため起こっている:

#menu ul ul li:hover ul.dropdown-inner { 
    display: block; 
} 

あなたは基本的にしていますショーホバリング時に同時にすべての子供を服用する。 代わりに、清潔であるがより具体的なものが必要です。direct child selectorを利用してください。あなたはいくつかのコードの男を私たちに提供する必要が

#menu .dropdown-inner ul { 
    display: table-cell; 
} 
+0

解決済み!完璧に動作します.. – Anderson

関連する問題