메가 드롭 다운 메뉴 css mysql 데이터베이스 데이터

Question

mysql 데이터베이스에서 온 메가 드롭 다운 메뉴를 만들고 싶습니다. 아래 내 PHP 코드입니다. 코드가 잘 작동하고 있습니다. 하지만 문제는 아래의 코드에 대한 메가 드롭 다운 메뉴를 만들 수 없다는 것입니다.

나는 여기에 예처럼 메가 메뉴가 필요합니다 https://bootsnipp.com/snippets/featured/bootstrap-mega-menu

내 문제는 내가 아래의 PHP 코드를 div 더 많이 만들 것입니다 방법이다.

Plz 위의 그림과 같이 메가 드롭 다운 메뉴에서 css을 도와주세요.

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

귀하의 의견대로. 나는 당신이 약간의 CSS를 필요로한다고 생각한다. 이것은 마우스를 올리면 작동합니다. 귀하의 예와 같이 클릭하면 안됩니다 :

.mega-menu-drop { 
    display:none 
} 

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