Aufklappmenü funktioniert nicht

  • Liebe CSS-Kollegen,

    ich beschäftige mich seit kurzer Zeit unter anderem mit CSS, weil ich versuche meine eigene Webseite zu bauen. Ich bin auch schon gut vorangekommen, aber mittlerweile haben sich so viele Navigationsunterpunkte angesammelt, dass ich aus meiner horizontalen Leiste doch gern ein Aufklappmenü machen würde.
    Ich bin auch schon so weit gekommen, dass ich daraus Listen gemacht habe, die auch schon nebeneinander aufgelistet sind.
    Mein Problem ist aber leider, dass die Untermenüpunkte entweder total ausgeblendet sind - auch wenn ich darüberhovere, oder sie sind dauerhaft eingeblendet, so dass meine Menüleiste die komplette Höhe der Liste einnehmen.
    Die Liste soll aber einen extra "Kasten" bekommen, der nur beim darüberhovern über die übergestellten Menüpunkte, erscheint.
    PS: Ich möchte das Ganze tatsächlich nur mit CSS bewerkstelligen, wenn möglich.
    Hier mein Quelltext, der entsprechenden Leiste:
    <ul id="fusszeile">
    <li>
    <ul>&nbsp;&nbsp;&nbsp;&copy; 2012 ivmb.de</ul>
    <ul><a href="kontaktueber.php">Hilfe & Kontakt</a> |
    <li><a href="versand.php">Versandkosten</a></li>
    <li><a href="faq.php">H&auml;ufig gestellte Fragen</a></li>
    <li><a href="kontakt.php">Kontaktformular</a></li>
    <li><a href="tutorial.php">F&uuml;hrung durch unsere Seite</a></li>
    </ul>
    <ul><a href="recht.php">Rechtliches</a> |
    <li><a href="agb.php">AGB</a></li>
    <li><a href="disclaimer.php">Haftungsausschlu&szlig;</a> </li>
    <li><a href="datenschutz.php">Datenschutzbestimmungen</a></li>
    <li><a href="impressum.php">Impressum</a></li>
    </ul>
    </li>
    </ul>
    und die CSS:
    ul#fusszeile{
    background-color: #96468C;
    font-family: Verdana, Helvetica, sans-serif;
    color: #ffffff; !important;
    font-size: 0.9em;
    position:fixed;
    margin-top: 7em;
    padding-left: 17em;
    width: 80%;
    padding-right:2em;
    list-style:none;
    display:inline;
    }
    ul#fusszeile a:visited {color: #ffffff; !important; }
    ul#fusszeile li ul{
    display:inline;
    float:right;
    color: #ffffff; !important;
    }
    ul#fusszeile li ul:hover{
    display:block;
    float:right;
    width:20em;
    }
    ul#fusszeile li ul li{display:none;
    list-style:none;}
    ul#fusszeile li ul li:hover{
    display:block;
    }
    Im Moment sind hier die übergestellten Menüpunkte zu sehen, aber es erscheint nichts beim darüberhovern.
    Bitte, ich quäle mich schon seit Tagen damit und finde den Fehler einfach nicht :(
    Danke.
    JaiMe

  • Danke sejuma,
    das hat mir zwar ein wenig weiter geholfen, aber leider nur ein wenig.
    Ich bin jetzt zumindest so weit, dass es aufklappt, wenn ich darauf hovere.
    War wohl, dass ich statt ul#fusszeile li ul li:hover das hover hinter das ul schreiben musste.

    Aber leider wird dann einfach nur meine gesamte Leiste so breit (hoch) wie auch das aufgeklappte Menü ist.
    Ich wollte aber eigentlich, dass das ein "Kasten" wird, der ausklappt.
    Wie kann ich denn das bewerkstelligen?

  • Dein Fehler (und den hättest Du auf o.g. Seiten erkennen können) ist, dass Du das aufklappende Menü nicht absolut positionierst. Schau dir die Beispiele nochmal hinsichtlich des CSS-Code genau an und vergleiche es mit deinem.

    Ein Tipp:

    Code
    position: absolute;