Question

任何人都可以告诉我这些代码有什么问题...... 我无法显示子菜单......

我认为我在从数据库调用子菜单的部分出错了。但我查了一下，没有什么不对。

也许css有些错误。但我不知道......

php代码：

<html>
<head>
    <link rel="stylesheet" href="<?php echo"css/copy.css" ?>" type="text/css" />
</head>
<?php include "koneksi.php"?>
<body>
<div id="page-wrap">
    <ul class="dropdown">
        <?php
            /*where I select main menu from table mainmemnu*/
            $main = mysql_query("SELECT * FROM mainmenu WHERE aktif='Y'");

            while($r=mysql_fetch_array($main))
            {
                echo"<li><a href='$r[link]'><span>$r[nama_menu]</span></a>";

                /*where I select sub menu from table submenu*/
                $sub = mysql_query
                ("SELECT * FROM submenu, mainmenu WHERE submenu.id_main = mainmenu.id_main AND submenu.id_main=$r[id_main]");

                $jml = mysql_num_rows($sub);

                if($jml > 0)
                {
                    echo"<div><ul>";

                    while($w = mysql_fetch_array($sub))
                    {
                        echo
                        "<li>
                            <a href='$w[link_sub]'>
                            <span>
                                &#187; $w[nama_sub]
                            </span>
                            </a>
                        </li>";
                    }
                    echo"</ul></div></li>";
                }
                else
                {
                    echo"</li>";
                }
            }
        ?>
    </ul>
</div>
</body>
</html>

css代码：

* {margin: 0; padding: 0;}
body {font: 14px Helvetica, San-Serif;}
#page-wrap{width: 800px; margin: 0px auto; padding-left: 419px;}
a { text-decoration: none; }
ul { list-style: none; }
p { margin: 15px 0; }

/* Level One */
ul.dropdown{position: relative;}
ul.dropdown li{font-weight: bold; float: left; zoom: 1; background: #ccc;}
ul.dropdown a:hover{color: #000;text-decoration: none;}
ul.dropdown a:active{color: #222;}
ul.dropdown li a{display: block; padding: 4px 8px; border-right: 1px solid #333; color:#222;}
ul.dropdown li:last-child a{border-right: none;}
ul.dropdown li.hover, ul.dropdown li:hover{background: #ffa500; color: black; position: relative; z-index: 9;}
ul.dropdown li.hover a{color: black;}

/* Level Two */

ul.dropdown ul{width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}
ul.dropdown ul li{font-weight: normal; background: #DCDCDC; color: #000; z-index: 9; border-bottom: 1px solid #ccc; float: none;}
ul.dropdown ul li a{border-right:none; width:100%; display: inline-block;}

当我把光标放在菜单上时，子菜单不会出现......

Answer 1

我想看看代码生成的HTML是什么样的，但IMO，你使用的方法太多了div，spans，不需要的标签..

看看这个jsfiddle是否可以帮助你，它纯粹是出于HTML＆amp; CSS。

这是您可能缺少的CSS的一部分。

ul.dropdown > li > ul {
    display: none;
}

ul.dropdown > li:hover > ul {
    display: block;
}

http://jsfiddle.net/x9D37/

Answer 2

当您将鼠标悬停在标记上时，需要使用javascript来操作要查看的块。您不能将鼠标悬停在隐藏的标记上。

Answer 3

您缺少将显示子div的css。基本上它归结为：

/*hiding initially*/
.dropdown li ul
{
    position: absolute;
    display: none;
}
/*display selectively*/
.dropdown li:hover > ul
{
    display: block;
}

下拉菜单php

3 个答案: