ul：focusのドロップダウンメニューを切り替えます

Question

純粋なCSSでドロップダウンナビゲーションを作成しようとしていますが、ulをクリックするとドロップダウンメニューが表示されます。問題は単純なul：focus> ulはアンカーがあっても動作しないということです。セレクタ：ホバーと：アクティブは問題なく動作します。

HTML

<li><a href="#">Menu 1</a> 
    <ul> 
     <li><a href="#">Sub Menu 1</a></li> 
     <li><a href="#">Sub Menu 2</a></li> 
     <li><a href="#">Sub Menu 3</a></li> 
     <li><a href="#">Sub Menu 4</a> 
    </ul> 
</li> 

CSSここで

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block 
} 

はコードです： https://codepen.io/anon/pen/vgpQWV

Answer 1

あなたのセレクタは#primary_nav_wrap ul li > a:focus + ulする必要があります。

それを破壊：

を<li>内側直接<a>は、すぐ隣の<ul>にこれらのスタイルを適用し、フォーカスがあるとき。

固定例：魔法のように

#primary_nav_wrap { 
 
    margin-top: 15px 
 
} 
 
#primary_nav_wrap ul { 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #333; 
 
    text-decoration: none; 
 
    font-weight: 700; 
 
    font-size: 12px; 
 
    line-height: 32px; 
 
    padding: 0 15px; 
 
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 
#primary_nav_wrap ul li { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#primary_nav_wrap ul li.current-menu-item { 
 
    background: #ddd 
 
} 
 
#primary_nav_wrap ul li:hover { 
 
    background: #f6f6f6 
 
} 
 
#primary_nav_wrap ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #fff; 
 
    padding: 0 
 
} 
 
#primary_nav_wrap ul ul li { 
 
    float: none; 
 
    width: 200px 
 
} 
 
#primary_nav_wrap ul ul a { 
 
    line-height: 120%; 
 
    padding: 10px 15px 
 
} 
 
#primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 
#primary_nav_wrap ul li > a:focus + ul { 
 
    display: block 
 
}

<h1>Testing menu</h1> 
 
<nav id="primary_nav_wrap"> 
 
    <ul> 
 
    <li class="current-menu-item"><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Menu 1</a> 
 
     <ul> 
 
     <li><a href="#">Sub Menu 1</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 2</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 4</a> 
 
      <ul> 
 
      <li><a href="#">Deep Menu 1</a> 
 
       <ul> 
 
       <li><a href="#">Sub Deep 1</a> 
 
       </li> 
 
       <li><a href="#">Sub Deep 2</a> 
 
       </li> 
 
       <li><a href="#">Sub Deep 3</a> 
 
       </li> 
 
       <li><a href="#">Sub Deep 4</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Deep Menu 2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Sub Menu 5</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 2</a> 
 
     <ul> 
 
     <li><a href="#">Sub Menu 1</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 2</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
     <ul> 
 
     <li class="dir"><a href="#">Sub Menu 1</a> 
 
     </li> 
 
     <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> 
 
      <ul> 
 
      <li><a href="#">Category 1</a> 
 
      </li> 
 
      <li><a href="#">Category 2</a> 
 
      </li> 
 
      <li><a href="#">Category 3</a> 
 
      </li> 
 
      <li><a href="#">Category 4</a> 
 
      </li> 
 
      <li><a href="#">Category 5</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 4</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu 5</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 4</a> 
 
    </li> 
 
    <li><a href="#">Menu 5</a> 
 
    </li> 
 
    <li><a href="#">Menu 6</a> 
 
    </li> 
 
    <li><a href="#">Contact Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>