我在侧边栏的 html 和 css 中做错了什么？

Question

我想创建一个侧边栏滑动菜单，但它似乎不起作用。我希望它在我点击图标时滑动。我使用 css 和复选框来启用此代码，但它似乎不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SideBar</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://kit.fontawesome.com/5e85fec85e.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
    <nav class="banner">
        <div id="header">
            <h1>LOGO</h1>
        </div>

        <div id="menu">
            <input type="checkbox" id="check">
            <label for="check" class="show-menu-btn">
                <i class="fa fa-bars"></i>
            </label>
            <ul class="dropdown">
                <li>Home</li>
                <li><>About</li>
                <li>Contact</li>
                <label for="check" class="hide-menu-btn">
                    <i class="fas fa-times"></i>
                </label>
            </ul>
        </div>
    </nav>

这是 css 代码。我想创建一个滑动侧边栏菜单，但它似乎不起作用。我希望它在我点击图标时滑动。我使用 css 和复选框来启用此代码，但它似乎不起作用。

@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";

* {
  margin: 0;
  padding: 0;
}

.banner {
  background: #475050;
  border-bottom: 2px solid black;
  display: flex;
  color: white;
  line-height: 0.7;
}

#header {
  padding: 15px 0 0 10px;
  font-family: fantasy;
  letter-spacing: 2px;
}

#menu {
  margin-left: auto;
  padding-right: 10px;
}

#menu ul {
  display: flex;
}

#menu ul li {
  list-style: none;
  padding: 20px 10px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#menu ul li a {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

#menu ul li a:hover {
  color: crimson;
}

#menu i, #check {
  display: none;
}

@media (max-width: 486px) {
  .banner {
    display: block;
  }

  #header {
    padding-bottom: 10px;
    border-bottom: 2px solid black;
  }

  #header h1{
      margin: 0;
      font-size: 1.5rem;
      line-height: normal;
      font-weight: 700;
  }

  #menu {
      width: 100%;
      background-color: #475050;
  }

  #menu i {
    display: block;
  }

  #menu ul {
    display: block;
    text-align: center;
    padding: 15px 0;
    width: 50%;
    position: fixed;
    height: 20%;
    background: #475050;
    right: -50%;
    line-height: normal;
    transition: 1.7s;
  }

  #menu ul li {
    padding: 0;
    padding-top: 5px;
  }

  #menu ul li a {
    color: white;
    text-decoration: none;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  #menu-hide {
    display: none;
  }

  #menu-show {
    display: block;
  }


  .show-menu-btn {
    height: 24px;
    width: 25px;
    background-color: yellow;
    text-align: center;
    border-radius: 4px;
    margin-top: -38px;
    margin-left: 90%;
    cursor: pointer;
    transition: left 0.4s ease;
    position: absolute;
    color: black;
    float: right;
  }

  .show-menu-btn,
  .hide-menu-btn {
    display: block;
  }

  .show-menu-btn,
  .hide-menu-btn {
    transition: 0.4s;
    font-size: 1.2rem;
    cursor: pointer;
  }

   .hide-menu-btn i,
   .show-menu-btn i {
    padding-top: 2px;
  }

  .hide-menu-btn {
    position: relative;
    float: right;
    margin-top: -35%;
    height: 24px;
    width: 25px;
    background-color: black;
    text-align: center;
    border-radius: 4px;
    color: white;
  }

  .show-menu-btn:hover,
  .hide-menu-btn:hover {
    color: crimson;
  }

  #menu i,
  #check {
      display: block;
  }

  #check {
    position: absolute;
    visibility: hidden;
    z-index: 1111;
  }

  #check:checked ~ #menu ul{
    right: 0%;
  }

Answer 1

发生这种情况是因为一旦进入父元素的子元素，就无法返回父元素。所以而不是

  #check:checked ~ #menu ul{
    right: 0%;
  }

删除#menu，因为你已经在#menu 元素中，而是使用这个：

  #check:checked ~ ul{
    right: 0%;
  }

这是工作 fiddle：https://jsfiddle.net/q9vsry40/2/

我在侧边栏的 html 和 css 中做错了什么？

What am I doing wrong in the html and css for the sidebar?

html

css

menu

sidebar