How to create a nested dropdown menu on click with focus (CSS only)?

问题

I asked previously a question about how to make a dropdown menu by css. Now I've got it to work beautifully. But now I need to make it react to on click. The menu I'm trying to create will have 2 sets of nested list items. I'm using pseudo selecter :focus on the first level list items. But of course I lose the focus part when I'm trying to display the nested list item. Is it possible in some way to keep the first level list item to stay focused while the user goes deeper in the menu?

My html code is like this

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

回答1:

It is not possible to do it simply with the :focus selector. In CSS, you cannot select the parent of an element, so as to keep the visibility with focus on a child. As an example:

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

That simply does not exist as of right now. And you also cannot have focus on multiple elements, which adds on to the issue.

There are two ways that I can think of solving your problem:

1. Using the JavaScript event onclick instead of a CSS-only approach;
2. Maintaining the CSS-only approach and using input:checked instead of :focus for your triggers. It's known as The Checkbox Hack.

来源：https://stackoverflow.com/questions/42401535/how-to-create-a-nested-dropdown-menu-on-click-with-focus-css-only