Comment créer un menu déroulant imbriqué sur un clic avec focus (CSS uniquement)?

Question

J'ai déjà posé une question sur la façon de créer un menu déroulant par css. Maintenant je l'ai pour fonctionner magnifiquement. Mais maintenant je dois le faire réagir au clic. Le menu que j'essaye de créer aura 2 ensembles d'éléments de liste imbriqués. J'utilise pseudo selecter: se concentrer sur les éléments de la liste de premier niveau. Mais bien sûr, je perds la partie focus lorsque j'essaie d'afficher l'élément de liste imbriqué. Est-il possible, d'une manière ou d'une autre, de garder l'élément de liste de premier niveau pour rester concentré pendant que l'utilisateur va plus loin dans le menu?

Mon code html est comme ce

<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> 

Et le css est répertorié ici

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

Il est impossible de le faire simplement avec le sélecteur :focus. En CSS, vous ne pouvez pas sélectionner le parent d'un élément, afin de conserver la visibilité en mettant l'accent sur un enfant. A titre d'exemple:

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

Cela n'existe tout simplement pas pour le moment. Et vous ne pouvez pas non plus vous concentrer sur plusieurs éléments, ce qui ajoute au problème.

Il y a deux façons que je peux penser à résoudre votre problème:

1. Utilisation de l'événement JavaScript onclick au lieu d'une approche CSS seule;
2. Gestion de l'approche CSS uniquement et utilisation de input:checked au lieu de :focus pour vos déclencheurs. Il est connu comme The Checkbox Hack.