Question

之前我问过一个关于如何通过css制作下拉菜单的问题。现在我已经让它工作得很漂亮了。但现在我需要让它对点击做出反应。我正在尝试创建的菜单将有2组嵌套列表项。我正在使用伪选择器：专注于第一级列表项。但当我尝试显示嵌套列表项时，我当然失去了焦点部分。是否有可能以某种方式保持第一级列表项在用户深入菜单时保持专注？

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

这里列出了css

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 */ }

现在根本不存在。而且你也不能专注于多个元素，这会增加问题。

我可以通过两种方式来解决您的问题：

使用JavaScript事件onclick而不是仅使用CSS的方法;
维护仅限CSS的方法，并使用input:checked代替:focus作为触发器。它被称为The Checkbox Hack。

如何在焦点单击时创建嵌套下拉菜单（仅限CSS）？

1 个答案: