Javascript 数据库驱动的多级动态菜单

我有一个HTML的菜单结构，如下所示

            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="about-us.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="page1.php">Page1</a></li>
                        <li><a href="page2.php">Page2</a></li>
                        <li><a href="page3.php">Page3</a></li>
                    </ul>
                </li>
                <li><a href="blog.php">Blog</a></li> 
                <li><a href="contact-us.php">Contact</a></li>
            </ul>

我希望输出像

---------------------------------------------------------
 HOME   ABOUT US   SERVICES   PAGES       BLOG   CONTACT 
---------------------------------------------------------
                            | PAGE 1     |
                            | PAGE 2     |
                            | PAGE 3     |
                             ------------

像这样

我试过

function render_menu($parent_id){
global $menu_html;
$result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id");
if (mysql_num_rows($result) == 0) {
    return;
}
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
    $menu_html.="<ul class=\"dropdown-menu\">\r\n";
}

while($row=mysql_fetch_array($result)){
    $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    render_menu($row['id']);
    $menu_html.="</li>";
}
$menu_html.="\r\n</ul>";
return $menu_html;
}

但是我没有得到想要的输出。我该怎么办

---

有人能解决这个问题吗？

我得到了部分答案

我修改了php代码

从

到

最终得到了理想的输出。 但这是第二级下拉列表，不是多级下拉列表

但问题是我无法设置活动菜单

部分编辑 我找到了一个代码并将其添加到我的页面中，得到了部分输出

$function{ var loc=window.location.href； $'.nav li'.eachfunction{ var link=$this.find'a:first.attr'href'； ifloc.indexOflink>=0 $this.addClass'active'； }; };

---

但仍在搜索是否可以将父级也设置为活动…

是否可以添加您运行的脚本的输出？@edvinas.me我正确地获得了一级菜单的输出，但下拉列表就像未排序的列表一样，左侧有一个小点[链接]。没有得到下拉列表在运行脚本之后，您仍然没有添加HTML输出。..@edvinas.me HTML输出为，图片为@edvinas.me我在Chrome中尝试了HTML主题。单击具有子页面的第一级菜单时，会激活一类下拉菜单open。单击包含子菜单的父菜单时，like将转换为。

function render_menu($parent_id){
global $menu_html;
$result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id");
if (mysql_num_rows($result) == 0) {
    return;
}
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
    $menu_html.="<ul class=\"dropdown-menu\">\r\n";
}

while($row=mysql_fetch_array($result)){
    $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    render_menu($row['id']);
    $menu_html.="</li>";
}
$menu_html.="\r\n</ul>";
return $menu_html;
}

$menu_html='';
function render_menu($parent_id){
    global $menu_html;
    $result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id ORDER BY sort ASC");
    if (mysql_num_rows($result) == 0) {
        return;
    }
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
    //$menu_html.="<ul class=\"dropdown-menu\">\r\n";
}
$cnt1 = 0;
while($row=mysql_fetch_array($result)){
    $cnt1 += 1;
    if($cnt1 === 1){
        $menu_html.="\r\n<li class=\"active\"><a href=\"{$row['link']}\">{$row['label']}</a>";
    }  else {
        $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    }

    render_menu($row['id']);
    //$menu_html.="</ul>";
    $menu_html.="</li>";       
}
//$menu_html.="\r\n</ul>";
    $menu_html.= "<li class=\"login\" style=\"border-left: 1px solid; margin-left: 10px\">";
    $menu_html.= "<a href=\"admin/index.php\" target=\"_blank\" style=\"margin-left:10px;\"><i class=\"icon-lock\"></i></a>";
    $menu_html.= "</li>"; 
  $menu_html.="\r\n</ul>";
return $menu_html;
}

$menu_html='';
function render_menu($parent_id){
global $menu_html;
$result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id");
if (mysql_num_rows($result) == 0) {
    return;
}
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
}

while($row=mysql_fetch_array($result)){
    if($row['link'] === '#'){
        $menu_html.="\r\n<li class=\"dropdown\">";
        $menu_html.="\r\n<a href=\"{$row['link']}\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">{$row['label']} <i class=\"icon-angle-down\"></i></a>";
        $menu_html.="\r\n<ul class=\"dropdown-menu\">";
    }  else {
        $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    }
    render_menu($row['id']);
    $menu_html.="</li>";
}
$menu_html.="\r\n</ul>";
return $menu_html;
}