如何在具有焦点的单击上创建嵌套的下拉菜单（仅CSS）？ [英] How to create a nested dropdown menu on click with focus (CSS only)?

问题描述

我之前问过一个有关如何通过CSS制作下拉菜单的问题。现在，我可以很好地工作了。但是现在，我需要使其对点击做出反应。我尝试创建的菜单将具有2套嵌套列表项。我正在使用伪选择器：专注于第一级列表项。但是，当我尝试显示嵌套列表项时，我当然失去了焦点。

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?

我的html代码是这样的

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

推荐答案

这是不可能的只需使用：focus 选择器即可。在CSS中，您不能选择元素的父级，以使可见性集中在子级上。例如：

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. 使用JavaScript事件 onclick 而不是仅使用CSS的方法；


2. 维护仅使用CSS的方法并使用 input：checked 代替：focus 作为触发器。它被称为复选框黑客。

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.

这篇关于如何在具有焦点的单击上创建嵌套的下拉菜单（仅CSS）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！