php - レイヤー ナビゲーション メニュー

Question

私は3つのテーブル、top_category、bottom_category、productsを持っています。現時点ではtop_categoryをリストしています。外部キーの親なので、たとえば top_category が次の場合:

prod1 
prod2
prod3
etc

そして今、私は以下のようにこれらの top_categories に私の下位カテゴリをロードしたいと思います:

prod1
 -subprod1
 -subprod2
 -subprod3
prod2
 -subprod4
 -subprod5
prod3
 -subprod6
etc

これは私のデータベースです：

CREATE TABLE top_category (
  id INT PRIMARY KEY,
  NAME VARCHAR(100) 
);

CREATE TABLE bottom_category (
  id INT PRIMARY KEY,
  NAME VARCHAR(100) ,
  top_category_id INT REFERENCES top_category
);

create table product (
  id int primary key,
  name varchar(100) ,
  bottom_category_id int references bottom_category
);

これは私のphp＆htmlコードです：

<?php
include('dbconnect.php'); 

try
    { 
        $result = $pdo->query(" SELECT * FROM top_category ORDER BY top_name ASC; ");
    } // end try
    catch (PDOException $e) 
    { 
        echo 'There was a error fetching the products.' . $e->getMessage();
        exit(); 
    } // end catch

$products = array();

foreach ($result as $row)
{
    $products[] = array('id' => $row['id'],    
                        'top_name' => $row['top_name']);
}

?>

<div class="sidebar">
    <h4 class="sidebar-header">Select Products</h4>
    <form class="nav-search-form">
        <input type="search" name="search" placeholder="Search products">
    </form>
    <nav class="sidebar-links"> 
        <ul>
            <li><a id="red" href="index.php">New Products</a></li>
            <?php foreach ($products as $product): ?>
            <li><a href="#"><?php echo htmlspecialchars($product['top_name']);?></a>

            <?php endforeach; ?>    
                <ul>
                    <li><a href="#"></a></li>
                </ul>
            </li>   
        </ul>
    </nav>
</div><!-- sidebar -->
<div class="main-content">