Как создать вложенное выпадающее меню при щелчке с фокусом (только CSS)?

Question

Ранее я задал вопрос о том, как создать выпадающее меню css. Теперь у меня есть, чтобы работать красиво. Но теперь мне нужно заставить его реагировать на щелчок. В меню, которое я пытаюсь создать, будет два набора вложенных элементов списка. Я использую псевдоселектор: сосредоточьтесь на элементах списка первого уровня. Но, конечно, я теряю часть фокуса, когда пытаюсь отобразить вложенный элемент списка. Возможно ли каким-либо образом сохранить элемент списка первого уровня, чтобы он оставался сфокусированным, в то время как пользователь глубже в меню?

Мой HTML-код, как этот

<header class="Header"> 
    <!-- Head navigation--> 
    <div> 
    <a href="#" title="cart"> <img src="images/cart_logo_webb_design.svg" alt="cart"></a> 
    <a href="#" title="Search"> <img src="images/search_logo_webb_design.svg" alt="search glass"></a> 
    </div> 
    <div> <img src="images/k_logo_webb_design.svg" alt="CompanyLogo"> </div> 
    <div> 
    <nav id="MainNavigation"> 
    <a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a> 
    <ul id="dropDownMenu"> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Woman">Woman 
     </a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Womanplus">+ 
     </a> 

     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li> <a class="Sub_Menu_Link" href="#" title="Man">Man</a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Manplus">+ 
     </a> 

     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li> 
    </ul> 
    </nav> 
    </div> 
</header> 

И КСС перечислены здесь

header { 
    position: fixed; 
    display: block; 
    background: white; 
    z-index: 1; 
    width: 100%; 
    top: 0; 
} 

.Header img { 
    width: 36px; 
    height: 40px; 

    } 

header div { 
    float: right; 
    width: 33.33%; 
    margin: 0; 
} 

header div:first-of-type a { 
    padding: 0%; 
} 



header div:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 

nav { 
    position: relative; 
    left: 0; 
} 


nav > ul { 
    margin: 0; 
    padding: 0 0px;; 
    float: left; 
    line-height: 40px; 
} 

nav a { 
    positon: absolute; 
    left: 0; 
} 

nav ul ul { 
    padding: 20px; 
} 
nav ul a { 
    list-style: none; 
    text-decoration: none; 
} 
nav ul ul li a { 
    display: inline-block; 
} 

nav > ul:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
.Sub_Menu_Link { 
    display: inline-block; 
    padding: 10px 0px; 
    line-height: 40px; 
} 

.Sub_Menu_Link:hover { 
    color: yellow; 
} 

nav ul { 
    background: #E9E9E9; 
    position: relative; 
    width: 100%; 
} 
nav ul ul li a:hover { 
    color: yellow; 
} 

nav ul ul { 
    display: none; 
} 

nav ul a:focus { 
    background: red; 
} 

nav ul a:focus ~ ul { 
    display: block; 
} 

nav > a:hover { 
    background-color: red; 
} 

nav > a:focus { 
    background-color: green; 
} 
nav ul { 
    display: none; 
} 

nav > a:focus ~ ul { 
    display: block; 
} 

Answer 1

Это не возможно сделать это просто с помощью переключателя :focus. В CSS вы не можете выбрать родителя элемента, чтобы сохранить видимость с упором на ребенка. В качестве примера:

element:focus -parent { /* this doesn't exist */ } 

Это просто не существует на данный момент. И вы также не можете сосредоточиться на нескольких элементах, что добавляет к проблеме.

Есть два способа, которые я могу думать о решении вашей проблемы:

1. Использование события JavaScript onclick вместо подхода CSS-только;
2. Поддержание только CSS-подхода и использование input:checked вместо :focus для ваших триггеров. Он известен как The Checkbox Hack.