切換下拉菜單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。

其分解：

當直接<a>的<li>內已經集中，應用這些樣式緊鄰的<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>