如何动态创建第二个下拉列表

Question

I have successfully been able to create the start of my dynamic dropdown navigation bar. Which looks like the following:

The code I have that works for this is as following:

1- The function I'm calling:

function loop_array($array = array(), $parent_id = 0){
    if(!empty($array[$parent_id])){
        echo '<ul>';
            foreach($array[$parent_id] as $items){
                ?>
                    <li><a href="view.php?id=<?php echo $items['id'] ?>"><?php echo $items["title"] ?></a>
                    <?php loop_array($array, $items['id']);echo '</li>';
            }
        echo '</ul>';
    }
}

function display_menus(){
    $con = mysqli_connect("localhost", "root", "", "solvedesktop");
    $query = $con->query("SELECT * FROM pages WHERE published = 1");
    $array = array();

    if(mysqli_num_rows($query)){
        while($rows = mysqli_fetch_array($query)){
            $array[$rows['parent_id']][] = $rows;
        }
        loop_array($array);
    }
}

2- The index page:

<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
        <h2 style="text-align:center;">Cork Symm Knowledgebase</h2>
                <?php display_menus(); ?>
        </div>
    <?php require_once(__DIR__."/../includes/footer.php");

The CSS I have is:

ul {
list-style:none;
padding:0px;
margin:0px;
}

ul li {
display:block;
position:relative;
float:left;
border:1px solid #2747E8;
}

li ul {
display:none;
}

ul li a {
display:block;
background:#2747E8;
padding:5px 10px 5px 10px;
text-decoration:none;
white-space:nowrap;
color:#fff;
}

ul li a:hover {
background:##2747E8;
}

li:hover ul {
display:block;
position:absolute;
}

li:hover li {
float:none;
}

li:hover a {
background:#000000;
}

li:hover li a:hover {
background:#2747E8;
}

#drop-nav li ul li {
border-top:0px;
}

I'm currently trying to add a second dropdown, for example from the image above if I hover over VMAX3 200K I should get another dropdown appear to the right of that, my issue is I have been trying to implement that into the function for the past number of hours and I have been unsuccessful thus for.

The table I have in my database is:

The navigation system is based of the different ids from the table. For example where parent_id and child_id is equal to 0 you will appear on the main navigation page:

For the first dropdown the parent_id will need to match one of the ids from the main navigation, for example the page VMAX 200K's parent_id will match the id of the VMAX3 and will appear in the list as shown in the top screenshot.

So the last part of this navigation, from the function I'm trying to write the code whereby a parent_id will match an id, AND the child_id will match the id of the resulting parent_id. (I hope this makes sense, it's rather confusing to say in English, and I'm finding it just as hard to write in PhP :( )

Any help with this would be gratefully appreciated.

Thanks and regards, Conal