ドロップダウンメニューを表示

Question

私はドロップダウンメニューを持っています。私は、メインメニュー項目（サンプル・ページ）を合わせると、私はすべてのドロップダウンメニューを見ることができますが、私は

li.menu-item.dropdown .dropdown-menu { 
 
    position: absolute; 
 
    top: 70px; 
 
    visibility: hidden; 
 
    margin-top: 0; 
 
} 
 

 
li.menu-item.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 

 
li.menu-item.dropdown:hover .dropdown-menu { 
 
    visibility: visible; 
 
}

<li class="menu-item menu-item-has-children dropdown"> 
 
    <a title="Sample Page" href="#">Sample Page <span class="caret"></span></a> 
 
    <ul role="menu" class=" dropdown-menu"> 
 
    <li class="menu-item dropdown"> 
 
     <a title="About" href="#">About</a> 
 
     <ul role="menu" class="dropdown-menu"> 
 
     <li class="menu-item"> 
 
      <a title="Image Alignment" href="#">Image Alignment</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li>

Answer 1

使用のみについてサブメニューを表示したいです子供のセレクタ

li.menu-item.dropdown:hover > .dropdown-menu { 
    visibility: visible; 
} 

ここにありますホバー：参照用jsfiddle

このanswer

Answer 2

使用>即時セレクタ

li.menu-item.dropdown:hover > .dropdown-menu { 
    display: block; 
} 

li.menu-item.dropdown:hover > .dropdown-menu { 
    visibility: visible; 
}