I am trying to create a hoverable mega menu, all works fine except the active one.
I checked in source codes and active class is added, but it doesn't show up the content until mouseenter on it.
see image please :
And this is when I go on it with mouse, it show up with no problem.
I gues I need to set main (FINANCE is main menu in pic) menu active, but dont know how to pass it to submenu.
Here is my full code :
$stmt_menu = $pdo->prepare("SELECT * FROM categories WHERE parentId = ? LIMIT 5");
$stmt_menu->execute([0]);
if ($stmt_menu->rowCount() > 0) {
$query = $stmt_menu->fetchAll();
foreach ($query as $row) {
if ($row['cat_type'] == 'mega') {
?>
<li class="dropdown megamenu-fw mega-li-<?php echo $row['catId']; ?>">
<a href="categories/<?php echo $row['catId']; ?>/<?php echo $row['cat_seo_url']; ?>" class="dropdown-toggle disabled" data-toggle="dropdown" role="button" aria-expanded="false"><?php echo $row['catName']; ?><span class="caret"></span></a>
<ul class="dropdown-menu megamenu-content dropdown-top" role="menu" aria-expanded="true" data-mega-ul="<?php echo $row['catId']; ?>">
<li>
<?php
$stmt_menu = $pdo->prepare("SELECT * FROM categories WHERE parentId = ? LIMIT 5");
$stmt_menu->execute([$row['catId']]);
if ($stmt_menu->rowCount() > 0) {
$subquery = $stmt_menu->fetchAll();
?>
<div class="sub-menu-left">
<ul class="nav-sub-categories">
<?php
$i = 0;
foreach ($subquery as $subq) {
$actives = '';
if($i == 0){
$actives = ' active';
}
?>
<li data-category-filter="<?php echo $subq['cat_seo_url']; ?>-<?php echo $subq['catId']; ?>" class="li-sub-category<?php echo $actives; ?>"><a href="<?php echo $subq['catId']; ?>/<?php echo $subq['cat_seo_url']; ?>"><?php echo $subq['catName']; ?></a></li>
<?php
$i++;
}
?>
</ul>
</div>
<div class="sub-menu-right">
<?php
$i = 0;
foreach ($subquery as $subcats) {
$actives = '';
if($i == 0){
$actives = ' active';
}
?>
<div class="sub-menu-inner filter-<?php echo $subcats['cat_seo_url']; ?>-<?php echo $subcats['catId']; ?><?php echo $actives; ?>">
<div class="row row-menu-right">
<div class="col-sm-3 menu-post-item">
<div class="post-item-image">
<a href="is-allowance-instantly-strangers-applauded">
<img src="assets/img/img_bg_md.png" data-src="uploads/images/202203/image_380x226_624239afd7295.jpg" alt="Is allowance instantly strangers applauded" class="lazyload img-responsive img-post" width="1" height="1"/>
</a>
</div>
<h3 class="title"><a href="is-allowance-instantly-strangers-applauded"><?php echo $subcats['cat_seo_url']; ?> Is allowance instantly strangers applauded</a></h3>
<p class="post-meta">
<a href="profile/admin">admin</a>
<span>Mar 28, 2022</span>
<span><i class="icon-comment"></i>2</span>
<span class="m-r-0"><i class="icon-eye"></i>894</span>
</p>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>
<?php
}
?>
</li>
</ul>
</li>
<?php
} elseif ($row['cat_type'] == 'dropdown') {
echo ' <li class="nav-item"><a class="nav-link" href="' . $row["cat_seo_url"] . '">test</a></li>';
} else {
echo ' <li class="nav-item"><a class="nav-link" href="' . $row["cat_seo_url"] . '">' . $row["catName"] . '</a></li>';
}
}
}

