hover Menü anordnung

Hallo, ich habe ein problem, dass sich einfach nciht lösen will, ich habe mit das openbook zu javascript (erstmal bis Images also kapitel9) durchgelesen und wollte ein hover Menü wie hier:JavaScript - Galileo Computing - OpenBook beschrieben erstellen, mein problem: auf bjc-buchen.co.de könnt ihr sehen wie ich diese weißen käßten angeordnet habe, nun sollen diese durch unsichtbare 1x1 pixelgroße ersetzt werden und es soll eben wenn man über verein oder mannschaften geht eine Liste davon erstellen, mein problem ist, dass wenn ich z.B. die linke spalöte auf 1x1 pixel setze, um zu „simulieren“ wie es aussehen sollte, verschiebt sich das ganze, wenn ich es anpasse, verschiebt es sich erneut wenn ich die linke spalte auf 1x1 pixel setze, könnt ihr mir helfen?
HTML:
[HTML]

BJC-Buchen

title-top

title-leftschrifttitle-right
title-bottom

[/HTML]

CSS:

[CODE]body {
background-color: #76EE00;
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
/----------------------------------------------------------------/

img#bottom {
width: 1281px;
height: 45px;

}

img#top {
clear: left;
width: 1281px;
height: 45px;
}

img#main {
height: 50px;
width: 376px;
}

img#right {
height: 50px;
width: 893px;
}

img#left {
height: 50px;
width: 12px;
}
/----------------------------------------------------------------/
ul#list-nav {
list-style:none;
padding-left: 0px;
margin: 0px;
width:450px;

}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
width:100px;
background:#76EE00;
color:black;
float:left;
text-align:center;
border-left:1px solid #000000;
}

ul#list-nav li#Impressum a {
border-right: 1px solid black;
}

ul#list-nav li a:hover {
background:#C0FF3E;
}

/---------------------------------------------------------------/

.main {
width: 325px;
height: 24px;
list-style: none;
margin: 0px;
padding-left: 10px;
padding-top: 30px;
height: 90px;
float:left;
}

.main li {
background-image: url(Button.png);
background-repeat: no-repeat;
height: 24px;
width: 175px;
padding-top: 4px;
text-align: center;
}

.main li#eins {
float: left;
}

.main li#zwei {
float: left;
}

.main li#drei {
float: left;
}

.main li#vier {
float: left;
}

.main li#fuenf {
float:left;
}

.main li a {
display:block;
text-decoration: none;
height: 24px;
width: 175px;
color: white;
text-align: center;
}

.main li:hover {
background-image: url(Button-h.png);
}

/----------------------------------------------------------/

.secnav {
margin: 0px;
width: 70px;
height: 24px;
float:left;
}

.secnav2 {
margin: 0px;
padding-bottom:4px;
width: 70px;
height: 24px;
clear: left;
}

.secnav3 {
height:24px;
width: 70px;
margin: 0px;
padding-right: 15px;
clear: left;
padding-bottom:4px;
}

.secnav4 {
height:24px;
width: 70px;
margin: 0px;
padding-left: 70px;
clear: left;
}

[/CODE]

MfG Dennis

Dein HTML-Code enthält einige Fehler im Markup:

Die können durchaus für seltsames Verhalten verantwortlich sein.

document type does not allow element „IMG“ here; assuming missing „LI“ start-tag

soweit ich das verstehe sind also keine Bilder in der Liste erlaubt, aber wenn dies so ist, ist mein vorhaben mit dem code von dem openbook überhaupt möglich?
ich meine, es wäre natürlich auch möglichen das script umzuschreiben, aber wird es auch funktionieren, wenn ich anstatt bildern Listen benutze?

Ein ul-Element kann nur li-Elemente enthalten. Die img-Elemente müsstest du also in li-Elemente setzen.

Ein- und Ausblenden kannst du übrigens auch per CSS erreichen.

JavaScript-Code sehe ich bei dir überhaupt nicht. So gesehen keine Ahnung, was du genau vorhast. Möglich wird’s aber bestimmt irgendwie sein.

Ja den javascript code hab ich ja auch noch nciht eingebaut, ich woltle erst die elemente ausrichten, damit ich später keine Überrauschung erlebe