动态 PHP 导航菜单

Question

我正在考虑构建一个看起来类似于 w3schools 的动态导航（我没有足够的积分来嵌入图像，所以现在只能使用链接）：

这些将基于以下 PHP 表：

enter image description here

如果 parent_id 和 child_id 为 0，我希望这些页面成为主要的导航选择，因此在这种情况下，我希望在导航栏上显示 DMX、VMAX、VMAX3、VMAX AF 和 PowerMax。

之后的想法是列出每个产品的型号，但这只会在用户将鼠标悬停在主要选择之一上时出现，parent_id 等于页面的 id。

最后，当您将鼠标悬停在 parent_id 的结果上时，您将获得 child_id，这将由 child_id 等于 parent_id 决定。

我在代码中调用的函数是：

function loop_array($array = array(), $parent_id = 0){
    if(!empty($array[$parent_id])){
        echo '<ul>';
            foreach($array[$parent_id] as $items){
                echo '<li>';
                ?>
                    <a href="view.php?id=<?php echo $items['id'] ?>"><?php echo $items["title"] ?></a>
                    <?php loop_array($array, $items['id']);echo '<br><br><br><br>';
            }
        echo '</ul>';
    }
}

function display_menus(){
    $con = mysqli_connect("localhost", "root", "", "solvedesktop");
    $query = $con->query("SELECT * FROM pages WHERE published = 1");
    $array = array();

    if(mysqli_num_rows($query)){
        while($rows = mysqli_fetch_array($query)){
            $array[$rows['parent_id']][] = $rows;
        }
        loop_array($array);
    }
}

我在主页上使用的代码是：

<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
                <?php display_menus(); ?>
        </div>
<div>
    <?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
    CKEDITOR.replace( 'body' );
</script>

我目前拥有的 CSS 是：

 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

所以基本上我在尝试构建导航栏时无法比下图更进一步： enter image description here 我可以正确填充 DMX、VMAX、VMAX3、VMAX AF 和 PowerMax 等主要部分。但是，它不会显示在一条水平线上，并且 parent_ids 仅在用户将鼠标悬停在主要部分上时才会显示。

任何帮助将不胜感激:)

Answer 1

这里的问题在于 CSS 只需在菜单项中添加一些 max-width。

这样解决了还是不让我知道。