无法根据PHP中的类别显示MySQL列表

I have two tables in MySQL, categories and subcategories and I'm using them to populate a dropdown list.

The arrangement that I want is like this; where when a specific category is selected the dropdown-item should be according to the main category

Problem: When a category is selected the dropdown-item is the same like this to all parent categories

This is the method I used to get the categories from the database

public function get_categories($category_table)
{
    // PURPOSE: get categories from the database
    $sql = "SELECT * FROM $category_table";
    $conn = $this->mysql_conn;
    $result = $conn->query($sql);

    while ($row = $result->fetch_assoc()) {
        // var_dump($row['category_name']);
        $html = '<a href="#" class="dropdown-toggle list-group-item" data-toggle="dropdown">' . $row["category_name"] . '<span class="caret"></span></a>
          <ul class="dropdown-menu">'; 

        //PURPOSE: get subcategories from database and pass it to the get_categories method
        $subsql = "SELECT subcategory_name FROM subcategories WHERE category_id={$row['id']}";
        $conn = $this->mysql_conn;
        $subresult = $conn->query($subsql);

        while ($subrow = $subresult->fetch_assoc()) {
            // extract($subresult);
            // echo $subrow['subcategory_name'] . "<br>";
            $subcat_name = array();
            $subcat_name = $subrow['subcategory_name'];
            // var_dump($subrow);
         $html .= '<li><a href="#">' . $subcat_name . '</a></li>';
        }
         $html .= '</ul>';
        echo $html;
    }
}

THis is the html where I insert this method

<div class="dropdown list-group">
        <a href="#" class="list-group-item">Latest Products</a>
        <?php $store->get_categories('categories'); ?>
      </div>

You are using a list to behave like a dropdown. This will require some fancy javascript and CSS. Which library (if any) are you using to automate that.

I use bootstrap Bootstrap dropdown documentation