ウィンドウを縮小してハンバーガーアイコンをクリックすると、何も表示されません

Question

ウィンドウをモバイルサイズに縮小し、ハンバーガー/ドロップダウンアイコンをクリックすると、残りのメニューが表示されます。しかし、私のjavascriptのdropdownmenu関数（）に応答していません。何も表示されません。ここに私の完全なコードです。私を助けてください。

基本的に私のHTMLコードでは、ナビゲーションバーを作成しました。通常のウィンドウページでは、ドロップダウンアイコン以外のすべてのメニュー項目が表示されます。サイズを縮小すると、最初のメニュー項目（「ホーム」）だけが表示され、ハンバーガードロップダウンアイコンが表示されます。ブラウザでhambugerアイコンのクリックが検出されたときに実行されるjavascript関数DropDownMenuを使用します。これは、メニュー項目の残りの部分をドロップするはずですが、そうではありません。

HTML：

CSS：

/*****************DEFAULTS******************/ 
html{ 
    font-family: "Helvetica Neue", sans-serif; 
} 

nav, header, footer{ 
    display:block; 
} 

body{ 
    line-height: 1; 
    margin:0; 
} 

/*****************NAV BAR******************/ 


ul.navmenu{ 
    background-color:aliceblue; 
    font-size:14px; 
    overflow:hidden; 
    margin:0; 
    padding:0; 
} 

ul.navmenu li{ 
    display: block; 
    padding:12px; 
    float:left; 
} 

ul.navmenu li:hover{ 
    background-color:aqua; 
} 

ul.navmenu li a{ 
    text-transform: uppercase; 
    text-decoration:none; 
    min-height:16px; 
    color:gray 
} 

ul.navmenu li.topnav-right{ 
    float:right; 
} 

ul.navmenu li.dropdownIcon{ 
    display:none; 
} 

/*****************MOBILE******************/ 
@media only screen and (max-width: 680px){ 
    ul.navmenu li:not(:nth-child(1)){ 
     display:none; 
    } 
    ul.navmenu li.dropdownIcon{ 
     display:block; 
     float: right; 
    } 

    ul.navmenu.responsive li.dropdownIcon{ 
     position:absolute; 
     top:0; 
     left:0; 
    } 
    ul.navmenu.responsive{ 
     position: relative; 
    } 
    ul.navmenu.responsive li{ 
     display:inline; 
     float:none; 
    } 
    ul.navmenu.responsive li a{ 
     display: block; 
    } 

} 

Answer 1

変更この行：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()"></a>&#9776;</li> 

正しいバージョン：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()">&#9776;</a></li>