Question

有人可以告诉我，为什么这不起作用？我做错了什么？

  <style>
    #menu-toggle:checked + #menu {
      display: block;
    }
  </style>
</head>
<body class="bg-gray-200">
  <input class="hidden" type="checkbox" id="menu-toggle" />
  <header class="lg:px-16 px-6 bg-navbar xl:h-20 flex flex-wrap items-center lg:py-0 py-2">
    <div class="flex-1 flex items-center font-semibold uppercase">
        <img src="http://5.189.143.250/pictures/server-icon.png" class="h-32 w-auto mr-5 hidden xl:block -mb-8" style="z-index: 2; position: absolute;">
      <label for="menu-toggle" class="pointer-cursor lg:hidden block"><svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg></label>
      <nav class="hidden xl:block" id="menu">
        <ul class="lg:flex text-xl text-gray-500 pt-4 lg:pt-0 xl:ml-32">
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500" href="#">Start</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500" href="#">Features</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500" href="#">Team</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500 lg:mb-0 mb-2" href="#">News</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500" href="#">Shop</a></li>
          <li><a class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-orange-500 hover:text-orange-500" href="#">Support</a></li>
        </ul>
      </nav>
    </div>
  </header>

它一旦起作用，但现在不再起作用。

如何创建切换导航栏？

0 个答案: