Thema: Submenu in div einschließen

Nabend,

ich bin grade dabei für ne Seite ne neue Navigation zu machen, welche durch ein horizontales Menu dargestellt werden soll, wobei sich bei einigen Punkten beim Rüberfahren mit der Maus ein Submenu öffnen soll..

Der HTML Code sieht nun folgendermaßen aus (Bspl. anhand eines Punktes):

Code:

<li id="current" class=" parent active item91">
  <a href="#" class="active_link current_link"><span>Dienstleistungen</span></a>
    <ul>
      <li class=" first_item item90"><a href="#"><span>Gravuren</span></a></li>
      <li class="item93"><a href="#"><span>Neue Produkte</span></a></li>
      <li class="item92"><a href="#"><span>Sammelbestellungen</span></a></li>
    </ul>
</li>

Der CSS-Code lautet wie folgt:

Code:

#nav {padding:0 0 0 0; background:#444; width:100%;}
#nav_main {height:30px; background:url(../../../images/liquid-extasy_1/navigation/backoff.gif) repeat-x; border-top:1px solid #aaa; border-bottom:1px solid #aaa; text-align:center;}
#nav_main ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; position:relative; display:inline-block;}
#nav_main ul li {margin: 0; padding-left: 0px; background:url(../../../images/liquid-extasy_1/navigation/divide.gif) no-repeat right top;}
#nav_main ul li {float:left; background: none;}
#nav_main ul ul {position:absolute; left:-9999px; top:-32000px;}

#nav_main a {display:block; font:normal 14px/30px arial,sans-serif; color:#777; height:30px; text-decoration:none;padding:0 14px; text-align:center;}
#nav_main ul.menu_main li a {float:left; background:url(../../../images/liquid-extasy_1/navigation/divide.gif) no-repeat left top;}
#nav_main ul.menu_main li a:hover {background:url(../../../images/liquid-extasy_1/navigation/hover-nosub.gif) no-repeat left top; border:0; color:#fff; position:relative;}
#nav_main ul.menu_main li.parent a:hover {background:url(../../../images/liquid-extasy_1/navigation/hover.gif) no-repeat left top;}
#nav_main ul.menu_main li:hover {position:relative;}
#nav_main ul.menu_main li:hover > a {background:url(../../../images/liquid-extasy_1/navigation/hover.gif) no-repeat left top; color:#fff;}

#nav_main ul li a:hover b {display:block; width:1px; height:1px; overflow:hidden; position:absolute; right:-1px; top:38px; background:#111;}
#nav_main ul li:hover > a b {display:block; width:1px; height:1px; overflow:hidden; position:absolute; right:-1px; top:38px; background:#111;}

#nav_main ul :hover div {left:0; top:30px; background:#111; border:1px solid #111; border-width:0 1px 1px 1px;}
#nav_main ul :hover div ul {border:1px solid #444; border-width:0 1px 1px 1px; padding-bottom:5px;}
#nav_main ul :hover div ul li {float:none; height:25px;}
#nav_main ul :hover div ul li a {display:block; height:25px; text-align:left; font:normal 13px/25px arial,sans-serif;}
#nav_main ul :hover div ul li:hover a:hover {color:#fff; background: none;}

Mein Problem ist jetzt, wie kann ich das Submenu noch mit einem div einschließen? Wenn ich im CSS Code das div einfach weglasse, dann wird das Menu zwar halbwegs ordentlich formatiert, aber der Inhalt unter dem Submenu ist zu sehen. Das ist ja nicht der Sinn der Sache.

Vielleicht fällt euch ja eine Lösung zu dem Problem ein. Grüße

Ne, das ist nicht das Problem. Das Auf- bzw. Zuklappen funktioniert ja ohne weiteres. Versteckt wir mit "#nav_main ul ul {position:absolute; left:-9999px; top:-32000px;}".

Das Problem das ich habe ist, dass die sich öffnende Liste den Inhalt des darunterliegenden Textes nicht vollständig überdeckt, da sie nicht in einem div steht..

Die HP läuft leider momentan nur auf meinem Rechner. :-/

So kann mir also keiner helfen?

Ich habe das jetzt mal so gemacht, dass ich den Quellcode der Startseite kopiert und in eine index.html gepackt habe.
Dazu dann noch die css-Dateien mit auf den Webspace und das dann ma angeguckt.

Zu sehen hier: www.cooling-extasy.de/test

Lustigerweise kommt der Fehler da allerdings nicht vor :( (Der Link Dienstleistungen hat Klappmenu).