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.