Mega-Dropdown-Menü CSS für MySQL-Datenbankdaten

Question

Ich möchte Mega-Dropdown-Menü, die aus MySQL-Datenbank kommt. Unten ist mein PHP-Code. Der Code funktioniert gut. Aber das Problem ist, dass ich kein Mega-Dropdown-Menü für den unten stehenden Code erstellen kann.

Ich brauche das mega-Menü wie das Beispiel hier: https://bootsnipp.com/snippets/featured/bootstrap-mega-menu

Mein Problem ist, wie werde ich mehr div mit dem unter PHP-Code zu machen.

Plz helfen mir die css für die Mega-Dropdown-Menü wie oben gezeigt.

<?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

wie von Ihrem Kommentar. Ich schätze, du brauchst etwas CSS. Dies funktioniert mit Maus Hover. aber nicht auf klicken wie in Ihrem Beispiel:

.mega-menu-drop { 
    display:none 
} 

.mega-menu:hover .mega-menu-drop { 
    display:block 
}