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

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

  .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>