не могу разобраться, как сделать выпадающий список на пункт меню "Услуги" и при нажатие на Услуги- становился активным(фон зеленый, как и у остальных пунктов меню) , а выбранный подпункт видимый, а остальные подпункты светлого цвета
$(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>