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>