<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> by clicking on the services (it becomes active like the other menus, the background is green), the list opens, click on 1 - override page 1 - the service item is still active, in 1-black color, and 2 and 3 in gray
$(".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> 
