伪 class :focus 不传播，现在怎么办？

Question

问题：仅使用 CSS 如何让它在 Tab 键中工作？（制表符已经有效）。

#menu:before {
  content:"Menu bc";
  font-weight:bold;
  width:100%;
}
#menu:hover:before {
  content:"Menu b2";
}
#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 bc";
  }
  #menu:hover:before {
    content:"Menu b2";
  }
  #menu a {
    position:absolute;
    left:-9999px;
  }
  #menu:hover a {
    position:relative;
    left:0px;
  }
}

这会隐藏菜单，在其位置添加单词 "Menu"，带有向下或向上箭头，具体取决于悬停状态，当您将鼠标悬停在菜单上时也会显示菜单。

问题是，虽然 :hover 工作得很好，但我无法通过使用 :focus 伪 class 跳转到其中一个标签来显示两者。（唉，:root 不会像其他伪 classes 一样工作，所以像 #menu a:focus:root #menu a { position:relative; left:0; } 这样的东西不会工作，据我所知）。

有没有人知道我如何解决这个问题，只使用 CSS？还是我给自己挖了个坑？

Answer 1

基于以下 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 bc";
  font-weight: bold;
  width: 100%;
}
nav:target + div a:before {
  content: "Menu b2";
}
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>

伪 class :focus 不传播，现在怎么办？

Pseudo class :focus doesn't propagate, now what?

css

pseudo-class