CSS not working on menu with submenu in PHP MYSQL

Question

I am trying to make a vertical drop-down menu with sub-menus, for example:

1-
 1-
 2-
  1-
3-

I've come up with the function below, but the CSS is not being applied even though it is defined on the page using the following:

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />

What am I doing wrong?

function display_menus($menuIdPai = 0) {
    $query = mysql_query("SELECT * FROM menu WHERE menuIdPai = ".$menuIdPai) or die(mysql_error());
    if (mysql_num_rows($query) > 0) {
        echo "<ul>";
        while ($row = mysql_fetch_array($query)) {
            echo "<li> <a href='percentagem.php'>".$row['id'].$row['menuNome']."</a>";
            display_menus($row['menuId']);
            echo "</li>";
        }
        echo "</ul>";
    }
}

<ul id="nav"> 
    <?php display_menus(); ?>
</ul>

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
}
ul li {
    position: relative;
}
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #E2144A;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
}
li:hover ul {
    display: block;
}

I've edited your question to simplify and clarify for future viewers. Please let me know if I've deviated from the original intent of your question. — , Jul 18 '15 at 22:48
Hello, the output of the menu is working. The only is not working is the css in that menu. — Christophe Costa, Jul 21 '15 at 22:40

Nisse Engström · Answer 1 · 2016-01-06T15:44:04.387

The CSS is not being applied because your HTML output is incorrect. In the following code:

<ul id="nav"> 
    <?php display_menus(); ?>
</ul>

the call to display_menus() produces its own <ul>...</ul> tags, so you end up with:

<ul id="nav"><ul> ...
</ul></ul>

This is, of course, not valid HTML. One solution to this is to skip the <ul>...</ul> tags in the HTML:

<?php display_menus(); ?>

and adjust display_menus() to output the id="nav" attribute only to the root menu (when $menuIdPai == 0):

function display_menus($menuIdPai = 0) {

/* Added $id variable: */

    $id = ($menuIdPai == 0 ? ' id="nav"' : ''); /* Note space before id */

    $query = mysql_query("SELECT * FROM menu WHERE menuIdPai = ".$menuIdPai) or die(mysql_error());
    if (mysql_num_rows($query) > 0) {

/* Added $id here: */

        echo "<ul$id>";

        while ($row = mysql_fetch_array($query)) {
            echo "<li> <a href='percentagem.php'>".$row['id'].$row['menuNome']."</a>";
            display_menus($row['menuId']);
            echo "</li>";
        }
        echo "</ul>";
    }
}

Note that you will also produce incorrect HTML if $row['id'] or $row['menuNome'] happens to contain < or & characters. You should probably escape the latter with htmlspecialchars($row['menuNome']). Probably not the first, depending on what kind of values you have for the id's.

Note also that the MySQL extension is deprecated and no longer maintained. You should be using MySQLi or PDO these days.

CSS not working on menu with submenu in PHP MYSQL

1 Answers1