I can not figure out how to make a drop-down list on the menu item "Services" and when I click on Services, I became active (the background is green, like the other menu items), and the selected sub-item is visible, and the rest are light-colored

$(document).ready(function() { var offset = $('#fixed').offset(); var topPadding = 10; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $('#fixed').stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $('#fixed').stop().animate({ marginTop: 10 }); } }); }); 
 .left-menu { background-color: #F4F4F4; min-height: 750px; width: 200px; float: left; } #gmenu ul { margin-top: 10px; width: 100%; list-style: none; padding-left: 15px; padding-right: 15px; float: left; } #gmenu li { font-size: 13px; line-height: 1.8; /*font-weight:600;*/ } #gmenu li a { display: block; /* Ссылка как блочный элемент */ padding: 2px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: black; } #gmenu li a:hover { background-color: #02A511; color: white; cursor: pointer; } #gmenu li a.active { background-color: #02A511; color: white; cursor: pointer; } 
 <div class="left-menu" id="gmenu"> <ul class="menu" id="fixed"> <li><a href="#">Главная</a> </li> <li><a href="#">Разработка сайтов</a> </li> <li>Услуги <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li><a href="#">Наши работы</a> </li> <li><a>Акции</a> </li> <li><a href="#">Статьи</a> </li> <li><a href="#">Контакты</a> </li> <li><a>Хостинг</a> </li> <li><a>Услуги копирайта</a> </li> <li><a href="#">Вакансии</a> </li> <li><a href="#">Отзывы</a> </li> <li><a>О нас</a> </li> </ul> </div>

  • a bit finalized the answer: is it necessary? codepen.io/Geyan/pen/ORPvwG - user33274
  • choose services - services green background, then click on 1 -1 black and 2 and 3 are not active, and the remaining menu items, as usual - Aslero

1 answer 1

 $(".submenu").click(function(){ $(".submenu ul").slideToggle(); $(".submenu").toggleClass("active"); }); 
 .left-menu { background-color: #F4F4F4; min-height: 750px; width: 200px; float: left; } ul.menu { margin-top: 10px; width: 100%; list-style: none; padding-left: 0px; padding-right: 15px; float: left; } ul.menu li { font-size: 13px; line-height: 1.8; cursor: pointer; } ul.menu li a { padding: 5px 15px; display: block; margin: 0px; text-decoration: none; color: black; } ul.menu li:hover a, ul.menu li.submenu:hover, ul.menu li.submenu ul li:hover, .active { background-color: #02A511; color: white; } ul.menu li.submenu ul { display: none; padding: 0px; } ul.menu li ul, ul.menu li.submenu ul li{ list-style: none; background-color: #F4F4F4; color: black; } ul.menu li.submenu ul li{ padding-left: 30px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left-menu" id="gmenu"> <ul class="menu" id="fixed"> <li><a href="#">Главная</a></li> <li><a href="#">Разработка сайтов</a></li> <li class="submenu"><a href="#">Услуги</a> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li><a href="#">Наши работы</a></li> <li><a>Акции</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Контакты</a></li> <li><a>Хостинг</a></li> <li><a>Услуги копирайта</a></li> <li><a href="#">Вакансии</a></li> <li><a href="#">Отзывы</a></li> <li><a>О нас</a> </li> </ul> </div>

  • choose services - services green background, then click on 1 -1 black and 2 and 3 are not active, and the remaining menu items, as usual - Aslero
  • one
    Write down in detail how it looks before and after the action, for I did not understand anything. - Vedenin
  • <li> <a href="#"> Home </a> </ li> <li> <a href="#"> Website Development </a> </ li> <li class = "submenu"> < a href = "#"> Services </a> <ul> <li> 1 </ li> <li> 2 </ li> <li> 3 </ li> </ ul> </ li> <li> <a href="#"> Our works </a> </ li> by clicking on the services (becomes active like the other menus, the background is green), the list opens, click on 1 - press on page 1 - the service item is still active , 1-black color, and 2 and 3 gray - Aslero