如何在焦点单击时创建嵌套下拉菜单（仅限CSS）？(How to create a nested dropdown menu on click with focus (CSS only)?)

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

我的HTML代码是这样的

<header class="Header">  <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; }

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

And the css is listed here

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中，您无法选择元素的父级，以便将焦点放在子级上以保持可见性。举个例子：

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

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

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

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

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:

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

更多推荐