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> © 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äufig gestellte Fragen</a></li>
<li><a href="kontakt.php">Kontaktformular</a></li>
<li><a href="tutorial.php">Fü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ß</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