Mit der Maus über drop-down-Menüs mit CSS und PHP

Ich versuche ein Menü zu erstellen, dass eine Maus über drop-down wählen Sie ein sub-Menü. Ich habe derzeit das gemeinsame Menü arbeiten, aber ich kann nicht herausfinden, der beste Weg zu gehen über die sub-Menüs angezeigt, die unter Ihren entsprechenden Kategorien.

Den Menüs aktuell Strecke der Tabelle zu verzerrten Proportionen. Ich möchte die aktuelle Tabelle zu halten, seine Größe und nur fallen Sie unter die Kategorie-Titel, ohne den Kategorie-Titel-Tabelle. Soll ich erstellen eine andere Tabelle, um anzuzeigen, dass oder was? Ich bin nicht vertraut mit web-Programmierung.

Mein zweites problem ist wahrscheinlich sehr einfach. Ich bin nur nicht sicher, was die Antwort ist. Ich habe versucht mein Glück mit Google keinen Erfolg. Was muss ich einstellen, "onMouseOut" - display gleich um die Menüs gefüllt. Das Untermenü derzeit verschwinden, wenn ich versuche, klicken Sie auf eine der sub-links.

<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>

InformationsquelleAutor pr- | 2012-08-01
Schreibe einen Kommentar