问题:如何仅使用 CSS 使其适用于 Tab 键？ (制表符已经起作用了)。
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}<html>
<title>Test</title>
<body>
<header>
<a href="#header1">Link to homepage</a>
</header>
<nav>
<ul id="menu">
<li><a href="#menu1">Menu item 1</a></li>
<li><a href="#menu2">Menu item 2</a></li>
</ul>
</nav>
<main>
<p>Other text with maybe a <a href="#main1">link here</a>.</p>
</main>
</body>
</html>编辑:原始问题如下。
我有一个菜单:
<ul id="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
</ul>
但是，我想将它隐藏在较窄的页面宽度中，所以我应用了以下 CSS:
@media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
这会隐藏菜单，在它的位置添加“菜单”一词，带有向下或向上箭头，具体取决于悬停状态，当您将鼠标悬停在菜单上时，它也会显示菜单。
问题是，虽然 :hover 工作正常，但我无法使用 :focus 伪类通过跳转到其中一个标签来显示两者。 (唉，:root 不会像其他伪类一样工作，所以像 #menu a:focus:root #menu a { position:relative; left:0; } 这样的东西不会工作，据我所知)。
有没有人知道我如何只使用 CSS 来解决这个问题？还是我给自己挖了个坑？
最佳答案
基于以下 OP 评论:
I'm happy to change the HTML, but how would :target work here?
这里是一段 :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}<nav id="menu">
<ul>
<li><a href="#menu1">Menu item 1</a>
</li>
<li><a href="#menu2">Menu item 2</a>
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>关于css - 伪类 :focus doesn't propagate, 现在是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31542922/