用于 mysql 数据库数据的大型下拉菜单 css

Question

我想制作来自 mysql 数据库的大型下拉菜单。下面是我的php代码。代码运行良好。但问题是我无法为下面的代码制作大型下拉菜单。

我需要像这里的示例这样的大型菜单：https://bootsnipp.com/snippets/featured/bootstrap-mega-menu

我的问题是如何使用下面的 php 代码制作更多 div 。

请帮我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
}