Dynamic PHP navigation menu - php

Question

I'm looking at building a dynamic navigation something that looks similar to that in w3schools (I don't have enough points to be able to embed images yet so stuck with links only for now):
These will be based off the following PHP table:
enter image description here
Where parent_id and child_id are 0 I want those pages to be the main navigation selections, so in this case I'm looking to have DMX, VMAX, VMAX3, VMAX AF and PowerMax to show on the navigation bar.
After that the idea is to list the models of each product, however this is only to appear when the user is hovering over one of the main selections, the parent_id is to equal the id of the page.
Finally when you hover over the result of the parent_id you will get the child_id, this will be decided by the child_id equaling the parent_id.
The functions I'm calling in my code is:
function loop_array($array = array(), $parent_id = 0){
if(!empty($array[$parent_id])){
echo '<ul>';
foreach($array[$parent_id] as $items){
echo '<li>';
?>
<?php echo $items["title"] ?>
<?php loop_array($array, $items['id']);echo '<br><br><br><br>';
}
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);
}
}
The code I'm using on the home page is:
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
<?php display_menus(); ?>
</div>
<div>
<?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
CKEDITOR.replace( 'body' );
</script>
The CSS I currently have is:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
So basically I can't get further than the below image when trying to build the navigation bar:
enter image description here
I can get the main sections such as DMX, VMAX, VMAX3, VMAX AF and PowerMax to populate correctly. However it's not showing in one horizontal line and the parent_ids show only appear if the user hovers over the main section.
Any help would be gratefully appreciated :)

Answer 1

Here the problem is with CSS just add some max-width to menu items.
by this solved or not let me know.