Mega dropdown menu css for mysql database data - php

Question

I want to make mega dropdown menu that comes from mysql database. Below is my php code. The code is working well. But the problem is I am unable to make mega dropdown menu for the code below.
I need the mega menu like the example here : https://bootsnipp.com/snippets/featured/bootstrap-mega-menu
My problem is how will I make more div with the below php code .
Plz help me the css for the mega drop down menu as shown above.
<?php
$sql = "SELECT id, product, parent_id, category_link FROM category ORDER BY parent_id, id";
$results = mysqli_query($conn,$sql) or die(mysqli_error()) ;
if($results)
{
while($result = mysqli_fetch_array($results))
{
$category['categories'][$result['id']] = $result;
$category['parent_cats'][$result['parent_id']][] = $result['id'];
}
}
function getCategories($parent, $category)
{
$html = "";
if (isset($category['parent_cats'][$parent]))
{
$html .= "<div id='wrapper'>";
$html .= "<ul class='mega-menu'>\n";
foreach ($category['parent_cats'][$parent] as $cat_id)
{
if (!isset($category['parent_cats'][$cat_id]))
{
$html .= "<li class='mega-menu-drop'>\n <a class='mega-menu-content' href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['product'] . "</a>\n</li> \n";
}
if (isset($category['parent_cats'][$cat_id]))
{
$html .= "<li class='mega-menu-drop'>\n <a class='mega-menu-content' href='" . $category['categories'][$cat_id]['category_link'] . "'>" . $category['categories'][$cat_id]['product'] . "</a> \n";
$html .= getCategories($cat_id, $category);
$html .= "</li> \n";
}
}
$html .= "</ul> \n";
$html .= "</div>";
}
return $html;
}
?>
<?php echo $data['category'] = getCategories(0, $category);?>

Answer 1

as of your comment. i guess you need some CSS.
this will work on mouse hover. but not on click like in your example:
.mega-menu-drop {
display:none
}
.mega-menu:hover .mega-menu-drop {
display:block
}