css - 使用 CSS 的下拉菜单 :target pseudo

Question

尝试在大屏幕上制作简单的下拉导航栏。尝试实现类似当我单击 Menu2 时显示子元素的效果。

HTML:

<nav id="menu-primary">
     <div class="menu-container"> 
        <div id="menu-toggle-primary">
            <a class="open-menu-primary" href="#menu-primary"><span>Open this menu</span></a>
            <a class="close-menu-primary" href="#"><span>Close this menu</span></a>
        </div> 
        <div class="wrap">
            <ul class="menu-items" id="menu-primary-items">
              <li class="menu-item"><a href="#">Menu 1</a></li>
              <li class="menu-item"><a href="#">Menu 2</a>
                <ul class="sub-menus" id="sub-menu">
                  <li class="sub-menu"><a href="#">Menu 2.1</a></li>
                  <li class="sub-menu"><a href="#">Menu 2.2</a></li>
                </ul></li>
              <li class="menu-item"><a href="#">Menu 3</a></li>
            </ul>
        </div> 
    </div> 
</nav> 

CSS:

 @media (min-width: 70em){
    #menu-toggle-primary{
        display: none;
    }
    #menu-primary-items li {
    display: inline-block;
    }
    #sub-menu {
    display:none;
    }
    #menu-primary-items li:target #sub-menu{
    display: block;
    } <!-- ????? -->
    }

最后一个 CSS 命令接缝有问题...有人可以帮忙吗？

在 emmanuel 向我展示了我所教的方法后，我可以轻松地为小屏幕做到这一点，但我再次陷入困境:想要实现这一点，在小屏幕上，只有“打开此菜单”，当有针对性地扩展 .menu-items 类而不是 .sub-menus 类时。只有在定位 .menu-item 类后，才会出现 .sub 菜单类。

这是我试过的，进一步的 CSS:

    @media (max-width: 70.1em){
    #menu-primary-items{
        display: none;
    }
    #menu-toggle-primary a.close-menu-primary{
        display: none;
    }

    #menu-primary:target #menu-primary-items{
        display: block;
       }

<!-- ????? -->
    .sub-menus{
        display: none;
    }  
    #menu-primary-items ul:target{
      display:block;
    } 


    #menu-primary:target #menu-toggle-primary a.open-menu-primary{
        display: none;
    }

    #menu-primary:target #menu-toggle-primary a.close-menu-primary{
        display: block;
    }
    } 

Answer 1

为了使用:target , <ul> id 需要是一个 anchor 。

@media (max-width: 70em) {
  #menu-toggle-primary {
    display: none;
  }
  #menu-primary-items > li {
    display: inline-block;
  }
  .sub-menu {
    display: none;
    position: absolute;
  }
  #menu-primary-items ul:target {
    display: block;
  }
}

<nav id="menu-primary">
  <div class="menu-container">
    <div id="menu-toggle-primary">
      <a class="open-menu-primary" href="#menu-primary"><span>Open this menu</span></a>
      <a class="close-menu-primary" href="#"><span>Close this menu</span></a>
    </div>
    <div class="wrap">
      <ul class="menu-items" id="menu-primary-items">
        <li class="menu-item"><a href="#menu1">Menu 1</a>
        </li>
        <li class="menu-item"><a href="#menu2">Menu 2</a>
          <ul class="sub-menu" id="menu2">
            <li class="menu-item"><a href="#">Menu 2.1</a>
            </li>
            <li class="menu-item"><a href="#">Menu 2.2</a>
            </li>
          </ul>
        </li>
        <li class="menu-item"><a href="#menu3">Menu 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>