There is a drop-down menu on jquery, it was necessary to add another nesting, I added: in the Rest - Summer Rest item - a drop-down submenu with months, so when I click on the Rest (+) item, I immediately open a submenu with months, but I want that it would be closed at first, and only when I clicked on the Summer Holidays icon (+) - I could not understand how to solve this. Thank.
$('.menu li').find('ul').parent().addClass('sub-menu'); $('.sub-menu').prepend('<span> + </span>'); $('.sub-menu').addClass('hide'); var menuShow = { show: function(post) { $('.sub-menu ul').slideUp(); $(post).parent().removeClass('show'); $(post).parent().addClass('hide'); }, hide: function(post) { $('.sub-menu').removeClass('show'); $('.sub-menu').addClass('hide'); $('.sub-menu ul').slideUp(); $(post).parent().find('ul').slideDown(); $(post).parent().removeClass('hide'); $(post).parent().addClass('show'); } }; $('.sub-menu span').click(function() { if ($(this).parent().attr("class") == 'sub-menu show') { menuShow.show(this); } else if ($(this).parent().attr("class") == 'sub-menu hide') { menuShow.hide(this); } }); .menu { display: block; margin: 0; padding: 0 0 15px 0; text-align: left; max-width: 768px; width: 100%; position: absolute; top: 96px; left: 0; right: 0; background: white; z-index: 1025; } .menu>li { display: block; height: 40px; margin-bottom: 1px; list-style: none; } .menu li.sub-menu { height: auto; } .menu li.sub-menu span { float: right; font-size: 20px; width: 40px; text-align: center; padding-top: 5px; cursor: pointer; font-weight: 500; color: $accent-color; position: absolute; right: 25px; } .menu a { display: block; text-align: left; font-size: 14px; text-decoration: none; font-family: $Roboto; font-weight: 400; color: $accent-color; padding-left: 45px; img { margin-right: 10px; } } .menu>li>a { line-height: 40px; padding: 0 12px; display: block; height: 40px; color: $accent-color; font-family: $Roboto; font-size: 15px; font-weight: 500; text-transform: uppercase; } .menu ul { display: none; margin: 0; padding: 0; } .menu li:hover>a { color: lighten($accent-color, 10%); transition: color 0.5s ease; background-color: rgb(246, 244, 245); } .menu li ul li:hover>a { color: lighten($accent-color, 10%); transition: color 0.5s ease; background-color: rgb(246, 244, 245); } .menu ul li { line-height: 25px; list-style: none; display: block; } .menu ul li ul li a { padding-left: 60px; font-size: 13px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="menu"> <li> <a href="placement.html">Размещение</a> <ul> <li><a href="single-room.html">1 местный номера</a></li> <li><a href="#">2-х местные номера</a></li> <li><a href="#">3-х местные номера</a></li> <li><a href="#">Путевки</a></li> </ul> </li> <li> <a href="#">Питание</a> <ul> <li><a href="#">Столовая</a></li> <li><a href="#">Ресторан</a></li> </ul> </li> <li> <a href="#">Отдых</a> <ul> <li> <a href="category.html">Летний отдых</a> <ul> <li><a href="info.html">Июнь</a></li> <li><a href="#">Июль</a></li> <li><a href="#">Август</a></li> </ul> </li> <li><a href="#">Межсезонье</a></li> <li><a href="#">Активный отдых</a></li> <li><a href="#">Полезная информация</a></li> </ul> </li> <li> <a href="#">Услуги</a> <ul> <li><a href="#">Трансфер</a></li> <li><a href="#">Экскурсии</a></li> <li><a href="#">ЖД/Авиа билеты</a></li> <li><a href="#">Парковка</a></li> <li><a href="#">Детская площадка</a></li> <li><a href="#">Танцевальная площадка</a></li> </ul> </li> <li> <a href="#">О нас</a> <ul> <li><a href="#">О пансионате</a></li> <li><a href="#">Акции и скидки</a></li> <li><a href="#">Вакансии</a></li> <li><a href="#">Партнеры</a></li> <li><a href="#">Документы</a></li> <li><a href="#">Новости</a></li> </ul> </li> <li> <a href="contacts.html">Контакты</a> <ul> <li><a href="#">Как добраться</a></li> </ul> </li> </ul> 
