Видел в интернете сайт со сворачивающимся боковым меню Есть код (должно сворачиваться в колонку сбоку при щелчке на иконку и разворачиваться при наведении) Код (Text): <style type="text/css"> * { list-style: none; text-decoration: none; margin: 0; padding: 0; } ul { background: #afafaf; display: inline-block; width: 420px; border-right: 1px solid #000; } ul li { padding: 6px 0; background: #fff; display: inline-flex; align-items: center; justify-content: space-between; } ul li:hover { background: lightgreen; } ul li a { color: #000; } ul li:hover a, ul li:hover .fa { color: #fff; } ul li .fa { display: inline-block; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .leftside { margin-left: 16px; display: inline-block; width: 30px; height: 30px; display: inline-flex; } .rightside { margin-right: 16px; visibility: hidden; width: 30px; height: 30px; display: inline-flex; } .centerplace { width: 328px; display: inline-flex; align-items: center; justify-content: space-between; } .nestedblock{ display: inline-flex; align-items: center; justify-content: center; margin:0 auto; } </style> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="testsite.js"> let elemmenuitemli = document.querySelectorAll('.fa'); let sidemenu = document.querySelector('#sidemenu'); elemmenuitemli.addEventListener("onmouseenter", checkitem); elemmenuitemli.addEventListener("onmouseleave", checkitem); function checkitem() { if sidemenu.classList.contains("active") { /* Удаление меню ul*/ sidemenu.delete(); /* Сворачивание меню ul */ <ul id="sidemenu"> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> </li> </li> </ul> } else { /* Удаление меню ul*/ sidemenu.delete(); <ul id="sidemenu"> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Техника для кухни</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Бытовая техника для дома</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Ноутбуки и компьютеры</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Комплектующие</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> </li> </ul> sidemenu.classList.add('active'); /* Разворачивание меню ul */ } } </script> <ul id="sidemenu"> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Техника для кухни</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Бытовая техника для дома</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Ноутбуки и компьютеры</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> <li> <div class="leftside"> <i class="fa fa-home"></i> </div> <div class="centerplace"> <a href="" class="nestedblock">Комплектующие</a> </div> <div class="rightside"> <i class="fa fa-home"></i> </div> </li> </li> </ul> Почему оно не работает вышеуказанным образом?