Html 菜单切换CSS只有在元素内部时才起作用

编辑：

我删除了我的问题。我相信CSS并不是一个真正实用的、编写滑动导航代码的好方法。因此，我用一个小jQuery创建了它

工作示例：

$document.readyfunction{ $toggle-nav.clickfunction{ $.main-nav.toggleClassnav-trans； }; }; * { 填充：0； 保证金：0； 框大小：边框框； } .主导航{ 位置：固定； 背景：2000人； 左：2米； 边框右上角半径：5px； 边框右下半径：5px； 颜色：fff； 最高：50%； 转化：translateY-50%translateX-100%； 转变：转变0.6s； } .主导航ul{ 列表样式类型：无； 左边距：-1米； 填充：1em 1em 1em 0； } 主导航李先生{ 填充：1em； } 切换导航{ 宽度：4em； 高度：4em； 背景：2000人； 边界半径：30em； 位置：绝对位置； 右：-1.7em； 最高：50%； 转化：translateY-50%； z指数：-1； } .nav trans{ 转换：translateY-50%translateX0； } 第1页 第2页 第3页 第4页 第5页

---

要使用nav内部的输入，您应该像这样应用html：

<nav>
    <input id="toggle-nav" type="checkbox">
    <ul class="main-nav">
      <li>pagina1</li>
        <li>pagina2</li>
          <li>pagina3</li>
          <li>pagina4</li>
          <li>pagina5</li>
    </ul>
  </nav>

---

你有两个代码，所以你很容易检查代码确定出了什么问题？检查你在ul中的标签你已经关闭了“而不是”标签。如果对我来说很容易，我不会问：P。我只是不知道为什么会出错。啊，愚蠢的错误：P这并不能解决我的问题：在你的第二个CSS代码切换nav id时，你有额外的剩余：9em；删除它检查它是否可以工作：我还将这两个代码都放在JSFIDLE中，并且在这里工作。谢谢毕竟，我不认为只使用CSS编写菜单是一种体面的方式。我会用jquery发布我的工作导航，但它不起作用？你自己试过了？这就是问题中提出的问题。