$('ul li a').click(function (){
$("ul li > a").removeClass("active");
$(this).addClass("active");
if($(this).next('.dropdown-list').length != 0){
$(this).next('.dropdown-list').slideToggle();
}
});
.dropdown-list {
display: none;
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="logo">LOGO</div>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a id="d1" href="#">Projects</a>
<ul class="dropdown-list">
<li><a style="line-height: 0;" href="#">Pictures</a></li>
<li><a style="line-height: 0;" href="#">Movies</a></li>
<li><a style="line-height: 0;" href="#">Slow-mo</a></li>
</ul>
</li>
<li><a id="d2" href="#">About me</a>
<ul class="dropdown-list">
<li><a style="line-height: 0;" href="#">CV</a></li>
<li><a style="line-height: 0;" href="#">Phone</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>