html - 使用 CSS 和 PHP 将鼠标悬停在下拉菜单上

Question

我正在尝试创建一个菜单，鼠标悬停在下拉菜单上可以选择子菜单项。我目前可以使用通用菜单，但我想不出让子菜单显示在相应类别下方的最佳方法。

菜单目前将表格拉伸(stretch)到扭曲的比例。我希望当前表保持其大小并刚好低于类别标题，而不影响类别的标题表。我应该创建另一个表来显示那个还是什么？我不熟悉网络编程。

我的第二个问题可能很简单。我只是不确定答案是什么。我在谷歌上试过运气但无济于事。我应该将“onMouseOut”显示设置为什么以保持菜单填充。当我尝试单击其中一个子链接时，子菜单当前消失了。

<td>
<STYLE TYPE="text/css">
    #menu1 { display : none }
    #menu2 { display : none }
    #menu3 { display : none }
    A:link {color:blue; text-decoration:none}
    A:hover {color:blue; text-decoration:underline}
</STYLE>
    <div id="menu">
        <table border="0" cellspacing="0" cellpadding="2" align="center">
            <tbody>
                <tr>
                    <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="top-center" onclick="window.location.href='index2.php?page=files'"> <a href="index2.php?page=files">Files</a></td>

                <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center">


                        <SPAN onMouseOver="document.all.menu2.style.display = 'block'"onMouseOut="document.all.menu2.style.display = 'none'">

                            Configuration<BR>

                        </SPAN>
                        <SPAN ID="menu2" onClick="document.all.menu1.style.display = 'none'">
                            <a href="index2.php?page=SysConfig">System Configuration</a><BR>
                            <a href="index2.php?page=FileConfig">File Configuration</a><BR>
                            <a href="index2.php?page=NetworkConfig">Network Configuration</a><BR>

                        </SPAN>
                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=Maintenance'"> <a href="index2.php?page=Maintenance">Maintenance Mode</a></td>

                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';" onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center" onclick="window.location.href='index2.php?page=IETM'"> <a href="index2.php?page=IETM">IETM</a></td>
                        <td style="cursor: pointer; background-color: rgb(204, 238, 255); " onmouseover="this.style.backgroundColor='#E5F6FF';"onmouseout="this.style.backgroundColor='#CCEEFF'" valign="top" align="center"> 



                            <SPAN onMouseOver="document.all.menu3.style.display = 'block'"onMouseOut="document.all.menu3.style.display = 'none'">

                                Power Options<BR>
                            </SPAN>

                            <SPAN ID="menu3" onClick="document.all.menu1.style.display = 'none'">

                                <A href="index2.php?page=Shutdown">Shutdown</A><BR>
                                <A href="index2.php?page=Reboot">Reboot</A><BR>                 
                            </SPAN>
                        </td>
                    </td>                   
                </tr>
            </tbody>
        </table>
    </div>  
</TABLE>

Answer 1

首先不要使用表格，它们会以多种方式限制您的选择。您可以改用 div，或者在您的特定示例(对于菜单)中，您可以使用 html 列表。

关于您的协奏曲问题的另一件事是，如果您可以使用 javaScript(稍微简化一下)，那么您可以说:

<ul id="menu">
    <li id="link1">Link 1
        <ul class="dropdown">
            <li id="sl1">Sublink 1</li>
            <li id="sl2">Sublink 2</li>
            <li id="sl3">Sublink 3</li>                                
        </ul>
    </li>
<li id="link2">Link 2</li>
        ...
<li id="link3">Link 3</li>        
        ...
</ul>

当然有适当的 css，并在此使用 javaScript 来显示/隐藏功能:

$(document).ready(function() {

$("#menu li").mouseenter(function(){
    $(this).find(".dropdown").show();
});

$("#menu li").mouseleave(function(){
    $(this).find(".dropdown").hide();
}); 

});