使用PHP和MYSQL的响应式垂直多级菜单

Question

I want to create a vertical menu using PHP and MYSQL making use of 3 tables,I am able to retrieve all the data one below the other but not able to view as sub menu if the css is implemented.

I have used the CSS as below

#cssmenu .has-sub {
    z-index: 1;
}

#cssmenu .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 150px;
    top: 5px;
    left: 100%;
}

#cssmenu .has-sub ul a {
    font-size: 12px;
}

#cssmenu .has-sub ul li {
    *margin-bottom: -1px;
}

#cssmenu .has-sub ul li a {
    background: #0fa1e0;
    border-bottom: 1px dotted #31b7f1;
    filter: none;
    font-size: 11px;
    display: block;
    line-height: 120%;
    padding: 10px;
    color: #ffffff;
}

#cssmenu .has-sub ul li:hover a {
    background: #0c82b5;
}

#cssmenu .has-sub .has-sub:hover > ul {
    display: block;
}

#cssmenu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}

#cssmenu .has-sub .has-sub ul li a {
    background: #0c82b5;
    border-bottom: 1px dotted #0fa1e0;
}

#cssmenu .has-sub .has-sub ul li a:hover {
    background: #09638a;
}

And my PHP is as below

<div id="cssmenu">
<?php
    $file="Images/store.png";
    echo "<ul>";
    $sql = mysqli_query($db, "SELECT * From category");
    $row = mysqli_num_rows($sql);
    if($row>0){
        while ($row = mysqli_fetch_array($sql)){

            echo "<li class=' has-sub'><a href='".$row['CatId']."' style=width:174px\;>".$row['CatName']."</a></li>";
            echo "<ul>";
            $sql1 = mysqli_query($db, "SELECT *  FROM subcategory WHERE CatId='".$row['CatId']."'");
            $row1 = mysqli_num_rows($sql1);
            if($row1>0){
                while ($row1 = mysqli_fetch_array($sql1)){

                    echo "<li class='has-sub'><a href='".$row1['SubCatId']."' style=width:174px\;color:#40404C\;font-size:13px\;font-family:openSans\;>".$row1['SubCatName']."</a></li>";
                    echo "<ul>";
                    $sql2 = mysqli_query($db, "SELECT *  FROM specificcategory WHERE SubCatId='".$row['SubCatId']."'");
                    $row2 = mysqli_num_rows($sql2);
                    if($row2>0){
                        while ($row2 = mysqli_fetch_array($sql2)){

                            echo "<li class='has-sub'><a href='".$row2['SpecCatId']."' style=width:174px\;color:#40404C\;font-size:13px\;font-family:openSans\;>".$row1['SpecCatName']."</a></li>";
                        }
                        echo "</ul>";                          
                    }
                }   

                echo "</ul>";                          
            }
        }   
        echo "</ul>";
    }
?>
</div>

I am able to display all the Category names but Subcategory and SpecificCategory names are not being displayed.I want Sub Category name to be displayed when Category is selected and Specific Category name when Sub Category is selected. I am not sure whether the CSS I am using is proper or not as I am very new to CSS. Please help me in solving the issue.

Thanks in advance.

Answer 1

Try Below, this will work for your senario.

CSS for tree view

   ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }

PHP structure for Ul li

 <div id="cssmenu">
    <?php
        $menu = '';
        $file="Images/store.png";
        $menu .= "<ul class='tree'>";
        $sql = mysqli_q

uery($db, "SELECT * From category");
    $row = mysqli_num_rows($sql);
    if($row>0){
        while ($row = mysqli_fetch_array($sql)){

            $menu .= "<li><a href='".$row['CatId']."' style=width:174px\;>".$row['CatName']."</a>";
            $menu .= "<ul>";
            $sql1 = mysqli_query($db, "SELECT *  FROM subcategory WHERE CatId='".$row['CatId']."'");
            $row1 = mysqli_num_rows($sql1);
            if($row1>0){
                while ($row1 = mysqli_fetch_array($sql1)){

                    $menu .= "<li><a href='".$row1['SubCatId']."' style=width:174px\;color:#40404C\;font-size:13px\;font-family:openSans\;>".$row1['SubCatName']."</a>";
                    $menu .= "<ul>";
                    $sql2 = mysqli_query($db, "SELECT *  FROM specificcategory WHERE SubCatId='".$row['SubCatId']."'");
                    $row2 = mysqli_num_rows($sql2);
                    if($row2>0){
                        while ($row2 = mysqli_fetch_array($sql2)){

                            $menu .= "<li><a href='".$row2['SpecCatId']."' style=width:174px\;color:#40404C\;font-size:13px\;font-family:openSans\;>".$row1['SpecCatName']."</a></li>";
                        }
                    }
                    $menu .= "</ul>";                          
                    $menu .="</li>";
                }
            }
            $menu .= "</ul>";                          
            $menu .="</li>";
        }
    }
    $menu .= "</ul>";

    echo $menu;
?>
</div>