# Drop Down Menü ?! (automatische verschiebung)



## Chrid (30. Juli 2003)

Habe folgenden Code auf einer Seite gefunden...
Er ist net schlecht und gefällt mir, da man ihn sicherlich gut auf ner Seite anwenden kann!
Es gibt jedoch ein Problem!!! Sobald ich etwas drunter setze, ist es soweit unten, wie das Drop-Down menü hoch ist...!
Gibt es auch eine möglichkeit das Menü über folgende dinge überlappen zu lassen?
Kann mir jemand sagen wo es SCRIPTE gibt, die im Endeffekt genauso aussehen!??

DANKE !!!!!!!!

Hier das SCRIPT:

<HTML> 
<HEAD> 
<TITLE> 
</TITLE> 

<STYLE> 
A:Hover { color:steelblue; text-decoration:none; text-transform: uppercase; font-weight:bold } 
A { color:royalblue; text-decoration:none; font-size: 10pt; font-family: Verdana, Arial } 
</STYLE> 

<SCRIPT LANGUAGE="Javascript"> 

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )) 
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 )) 

if (ns4) { 
layerRef="document.layers"; 
styleRef=""; 
} else { 
layerRef="document.all"; 
styleRef=".style"; 
} 

function afficheCalque(calque) 
{ 
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "visible"'); 
} 

function cacheCalque(calque) 
{ 
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "hidden"'); 
} 

</SCRIPT> 

</HEAD> 

<BODY bgColor=#0088CA text=#000000> 

<CENTER> 
<table border=0 cellspacing=0 cellpadding=0> 
<TR valign=top> 

<TD> 
<DIV STYLE="background-color:silver; width:220" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')"> 
<CENTER><a href=# onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Menü Nr.1</a></CENTER> 
</DIV> 
<DIV id=div1 onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')" style="position:relative; layer-background-color:silver; background-color:silver; width:220; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
 <a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Punkt1</a><br> 
 <a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Punkt2</a><br> 
 <a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Punkt3</a><br> 
</DIV> 
</TD> 

<TD> 
<DIV STYLE="background-color:silver; width:140" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')"> 
<CENTER><a href=# onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Menü Nr.2</a></CENTER> 
</DIV> 
<div id=div2 onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')" style="position:relative; layer-background-color:silver; background-color:silver; width:140; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
 <a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Season 1</a><br> 
 <a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Season 2</a><br> 
 <a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Season 3</a><br> 
</DIV> 
</TD> 

<TD> 
<DIV STYLE="background-color:silver; width:140" onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')" > 
<CENTER><a href=# onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')">Menü Nr.3</a></CENTER> 
</DIV> 
<DIV id=div3 onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')" style="position:relative; layer-background-color:silver; background-color:silver; width:140; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
 <a href="http://" onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')">bla1</a><br> 
 <a href="http://" onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')">bla2</a> 
</DIV> 
</TD> 

</TR> 
</TABLE> 
</CENTER> 

</BODY></HTML>


----------



## Gumbo (31. Juli 2003)

Ändere alle [color="2c2c8c"]position:relative;[/color] in [color="2c2c8c"]position:absolute;[/color]. Das wär zwar die einfachste aber nicht sauberste Methode.


----------



## Chrid (31. Juli 2003)

*Danke!*

Dankeschön!!!


----------



## raven2004 (26. November 2004)

Hallo ...


Was ist , wenn ich diese Tabbelen näher zusammen haben möchte ?

Ich habe alle width mal auf 100 gesetzt und dann im dreamweaver mx 2004 die ramen zusammengezogen , doch wenn ich jetzt auf präsentation gehe , sieht es immern och so breit aus , blos mit weißen lücken dazwischen ...was muss ich noch ändern ...mein text ist folgender :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Friedensklang.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF"><HTML>
<HEAD> 
<TITLE> 
</TITLE> 
<STYLE> 
A:Hover { color:steelblue; text-decoration:none; text-transform: uppercase; font-weight:bold } 
A { color:royalblue; text-decoration:none; font-size: 10pt; font-family: Verdana, Arial } 
</STYLE>
<script language="Javascript"> 
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )) 
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 )) 
if (ns4) { 
layerRef="document.layers"; 
styleRef=""; 
} else { 
layerRef="document.all"; 
styleRef=".style"; 
} 
function afficheCalque(calque) 
{ 
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "visible"'); 
} 
function cacheCalque(calque) 
{ 
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "hidden"'); 
} 
</script>
</HEAD>
<BODY bgColor=#0088CA text=#000000> 
<CENTER> 
<table width="500" height="38" border=0 align="center" cellpadding=0 cellspacing=0>
<TR valign=top> 
<TD width="100" height="38"> 
<DIV STYLE="background-color:silver; width:100" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')"> 
<CENTER>
<a href=# onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Bilder</a> 
</CENTER> 
</DIV> 
<DIV id=div1 onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')" style="position:relative; layer-background-color:silver; background-color:silver; width:220; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
<a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Jugend</a><br> 
<a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Orchester</a><br> 
<a href=http://" onmouseover="afficheCalque('div1')" onmouseout="cacheCalque('div1')">Konzerte</a><br> 
</DIV> 
</TD> 
<TD width="100"> 
<DIV STYLE="background-color:silver; width:100" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')"> 
<CENTER><a href=# onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">News</a></CENTER> 
</DIV> 
<DIV id=div2 onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')" style="position:relative; layer-background-color:silver; background-color:silver; width:220; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
<a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Im Verein</a><br> 
<a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Auf der Seite</a><br> 
<a href=http://" onmouseover="afficheCalque('div2')" onmouseout="cacheCalque('div2')">Bei den Terminen</a><br> 
</DIV> 
</TD> 

<TD width="100"> 
<DIV STYLE="background-color:silver; width:100" onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')" > 
<CENTER><a href=# onmouseover="afficheCalque('div3')" onmouseout="cacheCalque('div3')">Info</a></CENTER> 
</DIV> 
<div id=div3 onMouseOver="afficheCalque('div3')" onMouseOut="cacheCalque('div3')" style="position:relative; layer-background-color:silver; background-color:silver; width:140; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
<a href="http://" onMouseOver="afficheCalque('div3')" onMouseOut="cacheCalque('div3')">Presse-Archiv</a><br>
<a href="http://" onMouseOver="afficheCalque('div3')" onMouseOut="cacheCalque('div3')">Unsere Konzerte</a> 
<a href="http://" onMouseOver="afficheCalque('div3')" onMouseOut="cacheCalque('div3')">Jubelfest 2003</a> 
</div></TD> 


<TD width="100"> 
<DIV STYLE="background-color:silver; width:100" onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')"> 
<CENTER><a href=# onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')">Kontakt</a></CENTER> 
</DIV> 
<DIV id=div4 onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div1')" style="position:relative; layer-background-color:silver; background-color:silver; width:220; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
<a href=http://" onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')">Impressum</a><br> 
<a href=http://" onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')">Gästebuch</a><br> 
<a href=http://" onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')">Webmaster</a><br> 
<a href=http://" onmouseover="afficheCalque('div4')" onmouseout="cacheCalque('div4')">Links</a><br> 
</DIV> 
</TD> 

<TD width="100"> 
<DIV STYLE="background-color:silver; width:100" onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')"> 
<CENTER><a href=# onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')">Über uns</a></CENTER> 
</DIV> 
<DIV id=div5 onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')" style="position:relative; layer-background-color:silver; background-color:silver; width:220; border-width:thin; border-color:white; border-style: groove; visibility: hidden"> 
<a href=http://" onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')">Das sind wir</a><br> 
<a href=http://" onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')">Die Geschichte</a><br> 
<a href=http://" onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')">Das Orchester</a><br> 
<a href=http://" onmouseover="afficheCalque('div5')" onmouseout="cacheCalque('div5')">Der Vorstand</a><br> 
</DIV> 
</TD> 





</TR> 
</TABLE> 
</CENTER> 
</BODY></HTML>


----------

