How to make a dynamic dropdown on hover in my sidebar?

Question

When I click the button sidebar will come with the dynamic categories in it. while I hover on a category, I am trying to show the sub categories in the side bar.

But it's very hard for me to find this because am a newcomer.

My code is

 <style>
   .sidenav1 {
  height: auto;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #26b14f;
  overflow-x: hidden;

  padding-top: 60px;
}

.sidenav1 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav1 a:hover {
  color: #e0dbdb;
}

.sidenav1 .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

</style>
<div class="control-group" style="margin-top: 0px;">

            <div id="mySidenav" class="sidenav1">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">&times;</a>

                        <?php $sql=mysqli_query($con,"select id,categoryName  from category");
                        while($row=mysqli_fetch_array($sql))
                        {
                        ?>
                        <a href="category.php?cid=<?php echo $row['id'];?>" >|
                        <?php echo $row['categoryName'];?></a>
                        <?php }
                        ?>


            </div>


        <span id="open" style="font-size:30px;cursor:pointer;color: #ffffff;margin-left: 10px;" title= "categories" onclick="openNav1()">&#9776; </span>



        </div>


<script>
function openNav1() {
  document.getElementById("mySidenav").style.width = "275px";
}

function closeNav1() {
  document.getElementById("mySidenav").style.width = "0";
}


</script>

when i hover on the category , the corresponding sub categories should come . My database is like , having two tables one category table and another one subcategory table.

category table

id categoryName 1 aaa 2 bbb 3 ccc

subcategory table

id categoryid subcategory_name 1 1 zzz 2 2 yyy 3 2 xxx 4 3 www

Answer 1

You need to create a multi-dimensional array to achieve what you want. Since you are a beginner it would be better for you to walk on a simpler path (though it's not the optimal way, but you will understand why I'm saying this).

$sql=mysqli_query($con,"select id,categoryName  from category");
$catSubCatArr = array();
while($row=mysqli_fetch_array($sql)){
    $catSubCatArr[$row['id']] = $row['categoryName'];
    $innerSql=mysqli_query($con,"select id, categoryid, subcategory_name from subcategory where categoryid = ".$row['id']]);
    while($innerRow=mysqli_fetch_array($innerSql)){
        $catSubCatArr[$row['id']]['subcategory'][$innerRow['id']] = $innerRow['subcategory_name'];
    }
}

now create your desired dropdown which will be nested with this $catSubCatArr with the help of foreach() . Again I want to inform you that it's never a good idea to call SQL queries inside a loop, it will slowdown the process. But I think it will be helpful and you can change when you understand the flow completely.

you can add the HTML like this

<?php foreach($catSubCatArr as $key=>$val){ ?>
<a href="category.php?cid=<?php echo $key;?>" >|
<?php echo $val['categoryName'];?></a>
<?php /* Here start your sub category html?>
<?php foreach($val['subcategory'] as $innerkey=>$innerval){?>
<a href="category.php?cid=<?php echo $innerkey;?>" >|
<?php echo $innerval['subcategory_name'];?></a>
<?php }
}?>