HTML DropDown Menu

Kann mir einer sagen wie es geht folgendes zu coden:
Ich will ein Text wo man mehr lesen drücken kann und sich dann unter diesem noch mehr Text öffnet. Es sollte sich nicht die ganze Seite neu laden.
THX schon ma

Zitat von driver

also n dropdown findest hier:
http://barrierefrei.e-workers.de/workshops/tricks/menues.php

allerdings halt net mit klick, sondern mouseover.... (find ich auch besser für a menü)

hi,
ich hab grad ma versucht das erste Drop-Down Menü zu benutzen von deinem Link, wenn ich das in ein html-formular einfüge, funktioniert das voll nich...
wenn ich das Formular (mit zb Mozilla FF) öffne steht die helfte des Codes da....
woran liegt das...?

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
HTML
Fuer die ungestylte Textversion sollten noch ein paar
(ansonsten unsichtbare) Trennzeichen usw. eingebaut werden.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<div id="menuebox">

<div id="menue">
<div class="aussen">
<span class="menutag">Produkte</span>
Systeme
Speicher
Laufwerke
Monitore
Drucker
Zubehör
</div>
<div class="aussen">
<span class="menutag">Leistungen</span>
Netzwerke
Server
Wartung
</div>
<div class="aussen">
<span class="menutag">Service</span>
Reparatur
Konfiguration
Software
Schulung
</div>
<div class="aussen">
<span class="menutag">Links</span>
About Us
Partner
Referenzen
</div>
</div>

<!-- Der folgende Block bedient nur IEs!
Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->

<!--[if IE]>
<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
Systeme
Speicher
Laufwerke
Monitore
Drucker
Zubehör
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
Netzwerke
Server
Wartung
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
Reparatur
Konfiguration
Software
Schulung
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
About Us
Partner
Referenzen
</td></tr></table>
</a>
</div>
<![endif]-->

</div>

++++++++++++++++++++
CSS Teil I
++++++++++++++++++++

/*
Menue-styles fuer non-IEs
Achtung:
Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/

#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}

span.menutag {
display: block;
cursor: default;
}

++++++++++++++++++++
CSS Teil II
++++++++++++++++++++

/*
Menue-styles fuer IEs
Am besten per Conditional Comment einbinden.
Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
Anpassungen vorgenommen werden (siehe Kommentare).
*/

#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}

a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}

a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

_______
so, dass is der Code, was muss ich damit noch machen?

also den html-teil in ein html-file....k, hab ich
wie mach ich das mit der externen css-datei??
(is wahrscheinlich ne blöde Frage, weiß ich aber leider grade echt nich )
und wie muss ich die css datein nennen?
thx

thx driver, aber das funktioniert leider nich,
wenn mich mit der maus über das menü gehe,
kommen die untermenüs nich...kp warum.
hab beide css teile in style.css kopiert und beim html-file <head>
<link rel="stylesheet" href="style.css" type="text/css"/> </head>
eingegeben.

danke, aber da blickt ja keiner durch....wo sollen denn welche codes rein

wenn du das ma zusammhägend posten könnest wärs tierisch,
was ins style.css gehört und was ins html-file

für jemanden der weiß wovon du sprichst stimmt´s
Aber: Jeder hat mal angefangen und solange gefragt wird ist eben nicht alles klar.

Gruß, der Rosslauer von Rosslauer.de