Question

我想使用PHP和MYSQL利用3个表创建一个垂直菜单，我能够检索一个下面的所有数据，但是如果实现了CSS，则不能作为子菜单查看。

我使用了以下CSS

#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;
}

我的PHP如下所示

<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>

我可以显示所有类别名称，但不显示子类别和特定类别名称。我希望在选择类别时显示子类别名称，在选择子类别时希望显示特定类别名称。我不确定我使用的CSS是否正确，因为我刚接触CSS。请帮助我解决问题。

谢谢。

Answer 1

在下面尝试，这将适用于您的senario。

用于树形视图的CSS

   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);   
   }

Ul li的PHP结构

 <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>

带有PHP和MYSQL的响应式垂直多级菜单

1 个答案: