ハンバーガーメニューが出てきません

実現したいこと

ハンバーガーメニューのメニューを出せるようにしたい

前提

現在ウェブサイトの担当をしているのですが始めたばかりでは分かりません。
ハンバーガーメニューのメニューを出したいのですが、３本線のハンバーガーは出せたのですが肝心なメニューが出てきません

該当のソースコード

html

1 <div class="openbtn3"><span></span><span></span><span></span></div>2 <nav class="spnav">3 <div class="spnav-list">4 <ul>5 <li><a href="#">TOP</a></li>6 <li><a href="#">事業紹介</a></li>7 <li><a href="#">求人情報</a></li>8 <li><a href="#">問い合わせ</a></li>9 </ul>10 </div>11 </nav>12 </div>13```css 14/*================================================== 15　5-2-3 3本線が1本線に 16===================================*/ 17 18/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/ 19.openbtn3{ 20 position: relative;/*ボタン内側の基点となるためrelativeを指定*/ 21 background:#4C9F1E; 22 cursor: pointer; 23 width: 50px; 24 margin-left: 310px; 25 margin-bottom: 20px; 26 top: 10px; 27 28 height:50px; 29 border-radius: 5px; 30} 31 32/*ボタン内側*/ 33.openbtn3 span{ 34 display: inline-block; 35 transition: all .4s;/*アニメーションの設定*/ 36 position: absolute; 37 left: 14px; 38 height: 3px; 39 border-radius: 2px; 40 background: #fff; 41 width: 45%; 42 } 43 44 45 46.openbtn3 span:nth-of-type(1) { 47 top:15px; 48} 49 50.openbtn3 span:nth-of-type(2) { 51 top:23px; 52} 53 54.openbtn3 span:nth-of-type(3) { 55 top:31px; 56} 57 58/*activeクラスが付与されると1・3番目の要素が2番目の要素と同じ位置になり一本線に*/ 59 60.openbtn3.active span:nth-of-type(1) , 61.openbtn3.active span:nth-of-type(3){ 62 top: 23px; 63} 64/*========= レイアウトのためのCSS ===============*/ 65 66 67 68a{ 69 color: #333; 70 text-decoration: none; 71} 72 73.lead{ 74 margin:20px 0 0 0; 75} 76 77.btn-block{ 78 width:200px; 79 padding: 30px; 80}/*バーガーメニュー*/ 81

試したこと

動くWebデザインアイデア帳というサイトで見ながらやってみたんですができなかったです。