使用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命令接缝有问题......任何人都可以帮忙吗？

在伊曼纽尔向我展示我教授的方式后，我可以轻松地为小屏幕做到这一点，但我再次陷入困境： 想要在小屏幕上实现这一目标，只需打开此菜单＆＃34;当有针对性扩展.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需要为锚点。

＆＃13;

＆＃13;

@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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;