0

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

菜单当前将表格拉伸到扭曲的比例。我希望当前表保持其大小，并且只下降到类别标题下方，而不影响类别的标题表。我应该创建另一个表来显示它还是什么？我不熟悉网络编程。

我的第二个问题可能是一个非常简单的问题。我只是不确定答案是什么。我在 Google 上试了试运气，但无济于事。我应该设置什么“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>

4

1 回答 1

2

首先不要使用表格，它们在很多方面限制了您的选择。您可以使用 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();
});

});

于 2012-08-01T23:22:35.883 回答