モバイル画面でドロップダウンメニューが動作しない

Question

JavaScriptコードに問題があります。私は、モバイル版を見なければならない時を除いて、正しく動作するコードを書き出します。特に、メニューを開くことはありません。どうすれば修正できますか？残念ながら私は を行う方法を理解することはできませんあなたがあまりにもBootstrap jsとBootstrap cssなどのjQueryを欠けているので、多くの

https://jsfiddle.net/xsaaqj7z/

@media screen and (max-width:768px){ 
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none} 
.logo2{display:none} 
nav{width:100%;} 
#cssmenu{width:100%} 
#cssmenu ul{width:100%;display:none} 
#cssmenu ul li{width:100%;border-top:1px solid #444} 
#cssmenu ul li:hover{background:#363636;} 
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto} 
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0} 
#cssmenu > ul > li{float:none} 
#cssmenu ul ul li a{padding-left:25px} 
#cssmenu ul ul li{background:#333!important;} 
#cssmenu ul ul li:hover{background:#28b8d8!important} 
#cssmenu ul ul ul li a{padding-left:35px} 
#cssmenu ul ul li a{color:#ddd;background:none} 
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff} 
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left} 
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none} 
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700} 
    .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} 
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''} 
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''} 
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} 
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} 
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer} 
#cssmenu .submenu-button.submenu-opened{background:#262626} 
#cssmenu ul ul .submenu-button{height:34px;width:34px} 
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:after{top:15px;right:13px} 
#cssmenu .submenu-button.submenu-opened:after{background:#fff} 
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:before{top:12px;right:16px} 
#cssmenu .submenu-button.submenu-opened:before{display:none} 
#cssmenu ul ul ul li.active a{border-left:none} 
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none} 
} 

Answer 1

ありがとうございました。

は左側にあなたがそうあなたのサイトにそれらを追加し、メニューが動作する3リンクが表示されます、フィドルでhere

を参照してください。

あなたは