Aufklappbares Menü bei folgendem PHP-Menü

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

ich habe eine Liste erstellt, in der nach einer Datenbankabfrage die Einträge
als Listelemente aufgeführt werden. Klickt man auf einen dieser Einträge wird auf die jeweilige Seite verwiesen und dort die Daten gleich geladen. Die Daten werden per POST übergeben, weil ich kein GET mag. Der oberste Link im Code dient dazu die Seite auch dann aufzurufen, wenn noch keine Daten eingegeben worden sind.

button {
border:none;
background-color:#f9f7f2;
text-decoration:underline;
color: blue;
}

button:hover
{
color:red;
}
In der nächsten Zeile befindet sich der Oberpunkt
">testdaten
" method=„POST“>

<?php while($testfeld=$test->fetch_array())
{
?>
In der nächsten Zeile befinden sich die Unterpunkte

<?php echo $testfeld['vorname'] . " " . $testfeld['name'];?> <?php }
?\> Jetzt möchte ich ein Menü haben, in dem der oberste Link als Hauptpunkt dargestellt wird und die Listenelemente sich dann ausklappen sobald sich die Maus über den Oberpunkt befindet. Ich kenn zwar die Klasse hover doch ich weiß nicht wie die Listenelemente so gestallten lassen, dass sie sich ausklappen, wenn die Maus über dem Oberpunkt sich befindet. Gruß und Dank!
#2

Hier nachzulesen
http://www.silent-fran.de/css/tutorial/aufklappmenue…

#3

Hallo und danke für die Antwort,

ich habe dann noch ein Tutorial auf http://www.gipspferd.de/css/anleitung/a20/a20.php gefunden.

ul , li {
margin:0;
padding:0;
list-style:none;
}

ul#navi , ul#navi ul {
width:15em; /* entspricht einer Breite von 150px (150 / 16 )*/
float:left;
background:#f9f7f2;
}

ul#navi li {
position:relative;
}

ul#navi a {
display:block;
padding:5px;
color:#3a5166;
font-size:12px;
font-weight:bold;
}

ul#navi ul , /* 1. Ebene verschieben */
ul#navi li:hover ul ul , /* 2. Ebene verschieben */
ul#navi li:hover ul ul ul { /* 3. Ebene verschieben */
position:absolute;
left:-9999px;
top:0;
background:#f9f7f2;
}

ul#navi li:hover ul ,
ul#navi ul li:hover ul ,
ul#navi ul ul li:hover ul {
left:15em; /* entspricht 150px */
}

ul#navi li:hover > a ,
ul#navi ul li:hover > a,
ul#navi ul ul li:hover > a,
ul#navi ul ul ul li:hover > a {
background:#a33;
color:#fff;
}

.button
{
border:none;
background-color:#f9f7f2;
color: #3a5166;
}
.button:hover
{
color:#a33;
}

">Angaben

" method=„POST“>

<?php while($testfeld=$pers->fetch\_array()) { ?\> - <?php echo $testfeld['vorname'] . " " . $testfeld['name'];?> <?php }
?\> - <?php echo $testfeld['vorname'] . " " . $testfeld['name'];?> <?php }
?\> Es klappt leider noch nicht ganz. Der Mauszeiger verwandel sich in eine Hand bei den Angaben außerhalb der Form, aber innerhalb des FORM-Tag bleibt er ein normaler Cursor. Wie kann das sein? Gruß
1 Like
#4

Gelös!
Hallo zusammen,

ich habe es selber hinbekommen. Hier das neue Stylesheet

ul , li {
margin:0;
padding:0;
list-style:none;
}

ul#navi , ul#navi ul {
width:15em;
float:left;
background:#f9f7f2;
}

ul#navi li {
position:relative;
}

/*Oberpunkte */
ul#navi a {
display:block;
padding:5px;
color:#3a5166;
font-size:12px;
font-weight:bold;
}

/*Unterpunkte*/
ul#navi ul
{
position:absolute;
left:-9999px;
top:0;
background:#f9f7f2;
}

/*Einblendung Unterpunkt sobald Maus über Oberpunkt*/
ul#navi li:hover ul
{
left:15em;
}

/*Färbung für Oberpukte, wenn Mauszeiger darüber*/
ul#navi li:hover a {
background:#a33;
color:#fff;
}

.unterpunkt
{
background:#f9f7f2;
display:block;
padding:5px;
font-size:12px;
width:12em;
}
.unterpunkt:hover
{
background:#a33;
display:block;
padding:5px;
font-size:12px;
width:12em;
}

Und im Code habe ich die button durch unterpunkt ersetzt.

Danke!

1 Like