<div class="services-content-text-navbar" id="dropdown">
            <ul class="services-content-text-navbar_menu">
             <li class="header-menu">
                <a href="#">Гражданские дела</a>
                <ul>
                  <li>Симейные</li>
                  <li>Жилищные</li>
                  <li>Земельные</li>
                  <li>Трудовые</li>
                  <li>Страховые</li>
                  <li>Наследственные</li>
                  <li>Авторские</li>
                </ul>
             </li>
               <li class="header-menu">
                <a href="#">Гражданские дела</a>
                <ul>
                  <li>Симейные</li>
                  <li>Жилищные</li>
                  <li>Земельные</li>
                  <li>Трудовые</li>
                  <li>Страховые</li>
                  <li>Наследственные</li>
                  <li>Авторские</li>
                </ul>
             </li>
            </ul>
            
          </div>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
.services-content-text-navbar {
  position: relative;
}
.services-content-text-navbar > .services-content-text-navbar_menu > li > ul{
    list-style-type: disc;
    padding-left: 20px;
    overflow: hidden;
    height: 0;
}
$(document).ready(function() {
  $(".header-menu > a").click(function() {
    
     $.each($(".header-menu > ul"), function(i, d){
        if($(d).css('height') != '0px')
        {
           //Сворачиваем все открытые 
           $(d).animate({ height: 0 });
        }
     });
     var ul = $(this).next(),
      clone = ul
        .clone()
        .css({ height: "auto" })
        .appendTo(".services-content-text-navbar"),
      height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
    clone.remove();
    ul.animate({ height: height });
    return false;
  });
   
  $(".services-content-text-navbar > ul > li > a").click(function() {
    $(
      ".services-content-text-navbar > ul > li > a, .header-menu a"
    ).removeClass("active");
    $(this).addClass("active");
  }),
    $(".header-menu ul li a").click(function() {
      $(".header-menu ul li a").removeClass("active");
      $(this).addClass("active");
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.