nicht angemeldet
Hallo,
ich habe eine dynamische Navigationsleiste, ein Ausklappmenü, erstellt (ok, nach dem Code eines anderen :), welche zwar funktioniert, aber leider beim Ausklappen immer den Rest der Webseite verschiebt, was ich natürlich nicht will. Was kann ich tun?
Hier der Code der Seite:
____________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dynamische Navigationsleiste</title>
<style type="text/css">
div#Tmenu {
font-size: 12px;
width: 974px;
height:19px;
margin: 0px; padding: 0px;
background-color: #eee;
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
background-color:#ff0000;
margin: 0px; padding: 0px;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
position: relative;
margin: 0px; padding: 0;
}
* html ul#Navigation li {
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: relative;
top: 0px; left: 0px;
}
* html ul#Navigation li ul {
left: 0px;
lef\t: 0px;
}
ul#Navigation li ul li {
float: none;
display: block;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 122px;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
border: 1px solid #600;
color: white; background-color: #c00;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 90px;
w\idth: 90px; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {padding: 0px; background-color: #e00;}
ul#Navigation li ul a:hover {}
li a#aktuell {background-color: #00f;} /*aktueller Oberpunkt*/
ul#Navigation li ul span {color: #900; background-color: white;}
ul#Navigation li a:active, ul#Navigation li:hover a:active {color: #ff00ff; background-color: #f00;}
/*------------------------------------------------------------------------------------------*/
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display: block;
background: #eee;
}
</style>
<!--[if IE]>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "#eee";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<![endif]-->
</head>
<body>
<table width="953" border="0">
<tr>
<td><div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">Seite 1 ganz langer Link</a>
<ul>
<li><span>aktuelle Seite</span></li>
<li><a href="#Beispiel">Seite 1b ganz langer Link</a></li>
<li><a href="#Beispiel">Seite 1c</a></li>
<li><a href="#Beispiel">Seite 1d</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 2</a></li>
<li><a href="#Beispiel">Seite 3</a>
<ul>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
<div></div>
</div></td>
</tr>
<tr>
<td bgcolor="#0000FF"> </td>
</tr>
</table>
</body>
</html>
____________________________________________________________________
Ich habe auch schon versucht, das ganze mit Javascript zu lösen, allerdings scheinen davon einige abzuraten, außerdem habe ich dazu noch nichts gefunden. Und mit css scheint es nur so zu gehen..?
Viele Grüße,
Mira