JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu_container" style="top: 207px; bottom: 0px;">
  <ul class="tree">
    <li class="expandable">
      <a href="help.php?path=/1">1</a>

      <ul>
        <li class="expandable">
          <a href="help.php?path=/1/2" style="padding-left: 26px;">2</a>

          <ul>
            <li class="expandable">
              <a href="help.php?path=/1/2/3" style="padding-left: 36px;">3</a>

              <ul>
                <li class="expandable">
                  <a href="help.php?path=/1/2/3/4" style="padding-left: 46px;">4</a>

                  <ul>
                    <li class="expandable">
                      <a href="help.php?path=/1/2/3/4/5" style="padding-left: 56px;">5</a>

                      <ul>
                        <li class="expandable">
                          <a href="help.php?path=/1/2/3/4/5/6" style="padding-left: 66px;">6</a>

                          <ul>
                            <li class="expandable">
                              <a href="help.php?path=/1/2/3/4/5/6/7" style="padding-left: 76px;">7</a>

                              <ul>
                                <li class="expandable">
                                  <a href="help.php?path=/1/2/3/4/5/6/7/8" style="padding-left: 86px;">
                                      8</a>

                                  <ul>
                                    <li class="expandable">
                                      <a href="help.php?path=/1/2/3/4/5/6/7/8/9" style="padding-left: 96px;">
                                          9</a>

                                      <ul>
                                        <li class="expandable">
                                          <a href="help.php?path=/1/2/3/4/5/6/7/8/9/10" style="padding-left: 106px;">
                                              10</a>

                                          <ul>
                                            <li class="expandable">
                                           ...

CSS

.menu_container {
  position: absolute;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

JavaScript

start_index = $('.tree').parents().length;
  $('.tree').find('li').each(function() {
    if ($(this).children().length > 1) {
      $(this).addClass('expandable');

      $(this).children('ul').each(function() {
        tindex = $(this).parents().length - start_index;

        $(this).children('li').children('a').each(function() {
          $(this).css('padding-left', 16 + (5 * tindex) + 'px');
          console.log($(this).outerWidth());
          if ($(this).children().first().outerWidth() > $(this).outerWidth()) {
            pw = 16 + (5 * tindex) - $(this).outerWidth() + 10;
            console.log(pw)
            $(this).css('padding-left', pw + 'px');
          }
        });

         $(this).hide();
      });

    }

  });
 $('.tree').find('a').click(function (e) {
        e.preventDefault();

        $('.active').removeClass('active');

        $(e.target).addClass('active').parent().children('ul').each(function () {
            if ($(this).is(":visible")) {
                $(this).find('ul').hide();
                $(this).hide();
            } else {
                $(this).show();
            }

        });


    });