为什么li：focus无法在显示或可见性上起作用？

Question

我无法让li:focus显示其中的ul。

这里是https://jsfiddle.net/cgxwzdy0/10/，具有CSS display属性

，另一个具有visibility属性https://jsfiddle.net/cgxwzdy0/12/。

<div id="menu">
  <ul>
    <li>
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Css：

#menu ul li > ul {
  display: none;
}
#menu ul li li:focus > ul {
  display: block !important;
}

或具有可见性：

Css

#menu ul li > ul {
  visibility: hidden;
}
#menu ul li li:focus > ul {
  visibility: visible !important;
}

请没有JavaScript解决方案。如果CSS无法做到这一点，请解释一下原因吗？

当我打开开发人员工具并选择：focus菜单时，将显示。看一看图像。

Answer 1

要使元素聚焦，您需要考虑tabindex属性，但是内部的a元素存在另一个问题，会阻止聚焦效果。

这里是一个示例，您可以在单击文本外部而不是单击文本时集中精力：

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li:focus > ul {
  display: block;
}

<div id="menu">
  <ul>
    <li tabindex="-1">
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

  

tabindex全局属性指示其元素是否可以集中，   以及是否/在哪里参与顺序键盘导航   （通常使用Tab键，因此使用名称）。 ^ref

要使其与a元素一起使用，可以考虑使用:target

#menu ul li > ul {
  display: none;
}
#menu ul > li {
  border:1px solid;
  padding:10px;
}
#menu ul li #sub-menu:target {
  display: block;
}

<div id="menu">
  <ul>
    <li>
      <a href="#sub-menu">
      Lalalalal
      </a>
      <ul id="sub-menu">
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

  

：target CSS伪类表示一个唯一元素（目标   元素），其ID与URL的片段匹配。 ^ref

Answer 2

还有一个技巧是将:active和:hover和position结合使用absolute和relative。
因此，菜单在单击后不会向后折叠，而在:hover丢失时会折叠

#menu ul li {
  
  position: relative;  
}

#menu ul li ul {

   position: absolute; 
   top: 0px;
   left: 0px;
   padding: 20px;
   
   width: 100%;
   height: 100%;
  
   display: none;
   visibility: hidden;
}

#menu ul li:active > ul{
  
   display: block;
   visibility: visible;  
}

#menu ul li ul:hover {
 
   display: block;
   visibility: visible; 
}

<div id="menu">
  <ul>
    <li tabindex="-1">
      <a href="javascript: void(0)">
      Lalalalal
      </a>
      <ul>
        <li>
          <a href="javascript: void(0)"><span>Link 1</span></a>
          <a href="javascript: void(0)"><span>Link 2</span></a>
          <a href="javascript: void(0)"><span>Link 3</span></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

在https://jsfiddle.net/cgxwzdy0/244/上查看演示

此演示包含各种颜色，因此您可以查看正在发生的事情以及它起作用的原因{{3}}