Div 没有出现，没有错误弹出

Question

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

我正在尝试遵循一个教程，其中一个人设置了一个菜单，并且他在左上角有一个带有菜单图标的 div。我已经在 html 和 css 中完美地逐字逐句地遵循了代码，但我的屏幕上却什么也没有出现。我确实在他所做的完全相同的文件夹中有完全相同的图像。链接到 YT HTML 和 链接到 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>

预期的结果应该就像他在视频中那样。 链接到那个

Answer 1

尝试这个。以像素为单位添加高度。&nbsp; .btn-toggle-nav {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 60px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 46px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #F98F39;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-image: url(img/menu.png);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size: 40%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ul {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .btn-toggle-nav:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.5;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;<nav class="nav-main">&nbsp; &nbsp; <div class="btn-toggle-nav"></div>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Project</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Biography</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Gallery</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Contact</a></li>&nbsp; &nbsp; </ul></nav>