javascript - Div 未显示且未弹出任何错误

Question

我正在尝试设置菜单，但切换菜单的 div 未显示

我正在尝试学习一个教程，其中一个人设置了一个菜单，他在左上角有一个带有菜单图标的 div。我已经在 html 和 css 中逐字逐句地遵循代码，但我的屏幕上什么也没有出现。我在他做的完全相同的文件夹中确实有完全相同的图像。 Link to YT HTML ＆ 这 Link to YT CSS

.btn-toggle-nav {
  width: 60px;
  height: 100%;
  background-color: #F98F39;
  background-image: url("img/menu.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  cursor: pointer;
}
.btn-toggle-nav:hover {
  opacity: 0.5;
}

<nav class="nav-main">
 <div class="btn-toggle-nav"></div>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Biography</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

预期的结果应该就像他在视频中那样。 Link to that

Answer 1

试试这个。添加以像素为单位的高度。

  .btn-toggle-nav {
            width: 60px;
            height: 46px;
            background-color: #F98F39;
            background-image: url(img/menu.png);
            background-repeat: no-repeat;
            background-size: 40%;
            background-position: center;
            cursor: pointer;
            display: inline-block;
        }
        
        ul {
            display: inline-block;
        }
        
        .btn-toggle-nav:hover {
            opacity: 0.5;
        }

 <nav class="nav-main">
    <div class="btn-toggle-nav"></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>