Ohne den ganzen Faden gelesen zu haben würde ich es so lösen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Liste Einruecken</title>
<style type="text/css">
ul {
position:relative;
left:2em;
top:20em;
}
li {
float:left;
position:relative;
padding:-2em;
margin-left:-2em;
}
li.odd {
top:2em;
}
li div {
display:none;
position:absolute;
background-color:#FFB;
padding:0.5em;
}
li.even div {
bottom:4em;
}
li.odd div {
bottom:6em;
}
li:hover div {
display:block;
}
</style>
</head>
<body>
<ul>
<li class="even"><div>mehrzeiliger erklaerender Text zu Menuepunkt1</div><a>Menuepunkt 1</a></li>
<li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt2, der auch ein bisschen laenger ist als der zu Menuepunkt 1</div><a>Menuepunkt 2</a></li>
<li class="even"><div>mehrzeiliger erklaerender Text zu Menuepunkt3</div><a>Menuepunkt 3</a></li>
<li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt4</div><a>Menuepunkt 4</a></li>
<li class="even"><div>foobar</div><a>Menuepunkt 5</a></li>
<li class="odd" ><div>mehrzeiliger erklaerender Text zu Menuepunkt6</div><a>Menuepunkt 6</a></li>
</ul>
</body>
</html>
Schaut so aus wie ich dich verstanden habe.
Wie genau du dein Menü jetzt positionierst will ich dir gerne überlassen ich habe jetzt einfach einen Wert genommen der eben genügend Abstand nach oben schafft :)
Wenn du CSS3 benutzen willst kannst du auch das even/odd weglassen und einfach zählen :)
Es gibt auch noch den semantischen Vorteil, dass der Erklär-Text direkt dem Menü zugeordnet ist, also Roboter erkennen können, dass das zusammengehört, was ja sonst mit IDs oder so nicht unbedingt der Fall sein muss.
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(