JaiMe: Aufklappmenü wird nicht als Block angezeigt

Liebe Webmaster-Kollegen,
ich bin ein Anfänger, was CSS angeht und will jetzt für meine Webseite, weil die Navigation leider doch zu viele Unterpunkte bekommen hat, ein Aufklappmenü realisieren.
Ich bin jetzt auch endlich so weit, dass es ausklappt, aber leider klappt mir meine ganze Leiste aus. Ich wollte es aber gern als Block haben, der ausklappt. Kann mir jemand verraten, wo mein Denkfehler liegt?
Der HTML-Teil:

  
    <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 dazu:

  
ul#fusszeile{  
            background-color: #96468C;  
            font-family: Verdana, Helvetica, sans-serif;  
            color: #ffffff; !important;  
            font-size: 0.9em;  
            position:fixed;  
            margin-top: 6em;  
            padding-left: 17em;  
            width: 80%;  
            padding-right:2em;  
            list-style:none;  
            }  
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;  
                        }  
ul#fusszeile li ul li{  
                      display:none;  
                      }  
ul#fusszeile li ul:hover li{  
                            display:block;  
                            list-style:none;  
                            filter: alpha(opacity=70);  
                            background:-moz-opacity: 0.7;  
                            background:-khtml-opacity: 0.7;  
                            background:opacity: 0.7;  
                            list-style: none;  
                            clear:both;  
                            color: #ffffff;  
                            font-weight: bold;  
                            margin: 0.4em;  
                            padding: 0;  
                            padding: 4px 5px;  
                            border-top-width: 0;  
                            width: 20em;  
                            color:#ffffff; !important;}  

Es kann auch sein, dass noch eine ganze Memge Mist drin steht, weil ich hin- und herprobiert habe. Deswegen bin ich über jeden Tipp dankbar!

  1. مرحبا

    <ul id="fusszeile">
        <li>
         <ul>&nbsp;&nbsp;&nbsp;&copy; 2012 ivmb.de</ul>
    ...
        </li>
        </ul>

      
    Das solltest du ersteinmal aufräumen, bevor du dich ans CSS machst.  
    Welche Links sollen immer angezeigt werden, welche nur bei hover?  
    Ich rate mal:  
      
    ~~~html
    <ul id="fusszeile">  
      <li>© 2012 ivmb.de  
         <ul>  
           <li><a href="kontaktueber.php">Hilfe &amp; Kontakt</a></li>  
           <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>  
      </li>  
      <li><a href="recht.php">Rechtliches</a>  
         <ul>  
           <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>
    

    So ist es auch viel leichter zu stylen. Und lass ruhig alles weg, was nur einen Visuellen Effekt zum Ziel hat (&nbsp;, |). Das geht mit CSS viel schöner.

    mfg

    1. Da ist noch so einiges von vorherigen Formatierungen übrig geblieben.
      Vielen Dank für den Hinweis.
      Aber leider bringt mich das überhaupt nicht weiter was mein Problem angeht. Ganz im Gegenteil, ich habe leider das Gefühl, wenn ich es so umbaue, dann fange ich mit der CSS wieder von vorne an ... :-(

      Also was ist mein Denkfehler bezüglich des Aufklappblocks?

      1. مرحبا

        Aber leider bringt mich das überhaupt nicht weiter was mein Problem angeht. Ganz im Gegenteil, ich habe leider das Gefühl, wenn ich es so umbaue, dann fange ich mit der CSS wieder von vorne an ... :-(

        Willst du nicht in etwa sowas hier machen? Das war mit ein Paar Zeilen CSS erledigt. Hier siehst du das ganze Bsp. mit CSS und HTML (C&P von meinem vorherigen Posting).

        Also was ist mein Denkfehler bezüglich des Aufklappblocks?

        Sinnvoll strukturiertes HTML.

        mfg

        1. Wie sie sehen, sehen sie nichts ...
          Denn jetzt ist meine Leiste vollkommen verschwunden.

          Wenn Du Dir die Seite mal anschauen willst, dann hier:
          http://www.ich-verkaufe-mein-bild.de
          So sieht die Seite bisher aus und das will ich jetzt verkürzen auf "Rechtliches" und "Hilfe & Kontakt" mit den jeweiligen Unterpunkten.
          Also ist da wohl doch noch etwas mehr CSS nötig ...

          1. Wie sie sehen, sehen sie nichts ...
            Denn jetzt ist meine Leiste vollkommen verschwunden.

            Malcolm Beck's Beispiel funktioniert bei mir einwandfrei.

            1. Wie sie sehen, sehen sie nichts ...
              Denn jetzt ist meine Leiste vollkommen verschwunden.

              Malcolm Beck's Beispiel funktioniert bei mir einwandfrei.

              Das bezweifle ich ja auch gar nicht, dass es funktioniert. Aber es lässt sich irgendwie nicht auf mein Beispiel umsetzen, habe ich das Gefühl ...
              Ich bekomme meine Unterpunkte nicht in einem Block dargestellt, sondern nur über die komplette Breite der Leiste :-(

          2. مرحبا

            Wie sie sehen, sehen sie nichts ...
            Denn jetzt ist meine Leiste vollkommen verschwunden.

            Nein, die versteckt sich oben, so wie es im Quelltext steht. Also direkt unter der Kopfzeile.

            Wenn Du Dir die Seite mal anschauen willst, dann hier:
            http://www.ich-verkaufe-mein-bild.de

            Da hast du ja noch ne Menge Arbeit vor dir.

            So sieht die Seite bisher aus und das will ich jetzt verkürzen auf "Rechtliches" und "Hilfe & Kontakt" mit den jeweiligen Unterpunkten.

            Mit deinem aktuellen HTML-Grundgerüst wäre es eher Ratsam, erst einmal dieses nachzubessern. Da sind einige Fehler, die du erstmal beheben solltest.

            Also ist da wohl doch noch etwas mehr CSS nötig ...

            Nein, ich würde sagen das HTML gehört korrigiert. CSS kommt ganz zum Schluss, wenn der Inhalt klar ist (also was alles in die Seite reinkommt).

            mfg

            1. مرحبا

              Wie sie sehen, sehen sie nichts ...
              Denn jetzt ist meine Leiste vollkommen verschwunden.

              Nein, die versteckt sich oben, so wie es im Quelltext steht. Also direkt unter der Kopfzeile.

              Okay, ich habe sie gefunden. Aber leider bekomme ich es nicht hin, dass sie JEWEILS unter dem darüberstehenden Listeneintrag erscheint.
              Und noch dazu sehe ich jetzt immer nur den untersten Listeneintrag und nicht die ersten 3.

              Wenn Du Dir die Seite mal anschauen willst, dann hier:
              http://www.ich-verkaufe-mein-bild.de

              Da hast du ja noch ne Menge Arbeit vor dir.

              Das ist mir bewusst und ich habe auch schon viel verändert, nur noch nicht hochgeladen, da das der bestaussehendste Zwischenstand war. Die Fehler habe ich inzwischen schon längst korrigiert.

              So sieht die Seite bisher aus und das will ich jetzt verkürzen auf "Rechtliches" und "Hilfe & Kontakt" mit den jeweiligen Unterpunkten.

              Mit deinem aktuellen HTML-Grundgerüst wäre es eher Ratsam, erst einmal dieses nachzubessern. Da sind einige Fehler, die du erstmal beheben solltest.

              Also ist da wohl doch noch etwas mehr CSS nötig ...

              Nein, ich würde sagen das HTML gehört korrigiert. CSS kommt ganz zum Schluss, wenn der Inhalt klar ist (also was alles in die Seite reinkommt).

              Ich dachte eigentlich das wäre schon klar und, dass diese Foren dazu da sind, dass einem bei Problemen geholfen wird.
              Hatte ich nicht bereits gesagt, dass ich Anfänger bin? Ich bastele mich in all das gerade erst rein. Aber Hilfe habe ich nicht wirklich gefunden, sondern nur Kritik. Das ist wirklich sehr schade.
              Wenn Du mir wirklich weiter helfen willst, dann ERKLÄRE mir doch bitte, was ich falsch gemacht habe und an welcher Stelle ich Denkfehler habe und sag mir nicht nur die Hälfte oder schick mich auf Seiten, auf denen ich nur die Hälfte verstehe.

              Okay, ich habe die Liste nun umgeordnet, wie Du es in Deinem ersten Posting geschrieben hast. Aber mit der CSS, die Du mir dazu an die Hand gegeben hast, komme ich nicht weiter. Vielleicht ist Dir schon aufgefallen, dass ich hier kein <div id="fusszeile"> verwendet habe, sondern direkt die <ul> formatiere. Es wäre schon einmal hilfreich, wenn Du darauf eingehen könntest, denn dann verhält es sich ja leider doch ein wenig anders.
              Wie muss denn dann der Eintrag im CSS heißen, bei dem ich {display:block} setze?

              Und mein Kommentar, dass hier ja wohl doch ein wenig mehr CSS nötig ist, als das, was Du mir geschrieben hast, sollte einfach nur aussagen, dass ich hier meine farbige Leiste (die ich Dir auf meiner Webseite nur bildlich zeigen wollte) erhalten möchte und von den obenstenden Links ausgehend gern einen sich öffnenden Kasten mit der direkt darunter stehenden Liste der dazugehörigen Links. Und diese Listeneinträge sollen nicht einfach nur mittig auf der Seite sein, sondern eben in der Leiste eher rechts.
              Vielleicht ist das ja auch Meinst Du, dass Du mir den Weg dorthin zeigen und über den Rest hinwegsehen kannst? Denn wie bereits erwähnt habe ich meine zuvor von Dir kritisierten Fehler bereits ausgebügelt, nur noch nicht hochgeladen. Und das möchte ich auch erst machen, wenn ich fertig bin.
              Da ich aber auch noch einiges an PHP und MySQL vor mir habe, wird das wohl noch ein wenig dauern!

              mfg

              Danke und Grüße

              1. مرحبا

                Nein, die versteckt sich oben, so wie es im Quelltext steht. Also direkt unter der Kopfzeile.

                Aber leider bekomme ich es nicht hin, dass sie JEWEILS unter dem darüberstehenden Listeneintrag erscheint.

                Warum nicht? Wer macht den Quellcode?

                Und noch dazu sehe ich jetzt immer nur den untersten Listeneintrag und nicht die ersten 3.

                Kannst du mal mit Photoshop oder so zeichnen, was genau du willst?

                Die Fehler habe ich inzwischen schon längst korrigiert.

                Gut, denn mit Fehlern kann man keine Problemlösung erarbeiten. Es könnte ja sein, dass einer dieser Fehler dein Problem verursacht.

                Ich dachte eigentlich das wäre schon klar und, dass diese Foren dazu da sind, dass einem bei Problemen geholfen wird.

                Dir wird doch geholfen. Die hilfe, die du hier bekommst, unterscheidet sich von der Hilfe in anderen Foren. Wir doktern nicht an den Symptomen deiner Probleme herum. Wir lösen die Probleme von Grundauf, und diese sind in deinem Fall der Quelltext. Ich schreibe das nicht, um dich zu ärgern  (vielleicht doch, wer weiss das shon :))

                Hatte ich nicht bereits gesagt, dass ich Anfänger bin?

                Meinst du ich bin mit meinem Wissen auf die Welt gekommen?

                Ich bastele mich in all das gerade erst rein. Aber Hilfe habe ich nicht wirklich gefunden, sondern nur Kritik. Das ist wirklich sehr schade.

                Das kannst du noch nicht richtig einschätzen. Du suchst hilfe für ein Problem, dass du u. U. nicht hättest, wenn dein Quelltext richtig wäre.

                Wenn Du mir wirklich weiter helfen willst, dann ERKLÄRE mir doch bitte, was ich falsch gemacht habe und an welcher Stelle ich Denkfehler habe

                Wenn ich heute vom Training zurück bin und alles noch dran ist, wo es sein soll, mach ich das.

                Und mein Kommentar, dass hier ja wohl doch ein wenig mehr CSS nötig ist, als das, was Du mir geschrieben hast

                Natürlich kommt noch mehr CSS, aber nicht jetzt, sondern ganz zum Schluss, wenn die Inhalte im Quelltext (Markup) richtig ausgezeichnet sind.

                Vielleicht ist das ja auch Meinst Du, dass Du mir den Weg dorthin zeigen und über den Rest hinwegsehen kannst?

                Klar kann ich dir einen Fisch geben, aber vergiss nicht, nur selber fischen macht Frei ;)

                Da ich aber auch noch einiges an PHP und MySQL vor mir habe, wird das wohl noch ein wenig dauern!

                Das macht dafür am meisten Spass (PHP und MySQL), aber auch da wirst du Schwierigkeiten bekommen, wenn du kein HTML beherrschst (was nun wirklich nicht schwer ist, im gegenteil, HTML ist das einfachste von allen hier genannten Sprachen).

                mfg

                1. Bitte entschuldige, wenn ich etwas zu schroff geworden bin.
                  Ich bin neulich in einem PHP-Forum gleich geblockt worden als "wir sind hier kein Support für Fertig-Lösungen", weil derjenige nicht gelesen hatte, dass ich Anfänger bin. Und noch dazu quäle ich mich wirklich schon seit Tagen mit diesem Problem. Ich habe immer nur fertige Beispiele gefunden, die ich aber irgenwie nicht wirklich bei mir anwenden konnte.
                  Deswegen jetzt hier tatsächlich mal meine Vorstellungen:

                  An der linken Seite soll die Suche eingebaut werden, die fixiert ist und am Besten immer die gesamte Höhe des Browsers einnehmen soll.
                  Am Kopf erst die Zeile in der immer der Titel der Seite steht und die Buttons für die verschiedenen Anmeldemöglichkeiten.
                  Darunter dann die lila Zeile, in der das Aufklappmenü zu sehen ist, wie ich es hier mit Photoshop nachgestellt habe. Mir fehlt hier tatsächlich nur noch der aufklappende Rahmen, der aber immer unter dem jeweilgen Link erscheinen soll. Vielleicht habe ich das ja falsch verstanden, aber das geht doch gar nicht mit einer absluten Positionierung, oder? Erscheint der aufklappende Kasten dann nicht immer an der selben Stelle des Fensters, egal auf welchen Link ich klicke?
                  Und darunter soll dann der einzig scrollbare Rahmen der gesamten Seite mit dem wechselnden Hauptinhalt stehen.
                  LG
                  JaiMe

                  1. Vielleicht habe ich das ja falsch verstanden, aber das geht doch gar nicht mit einer absluten Positionierung, oder? Erscheint der aufklappende Kasten dann nicht immer an der selben Stelle des Fensters, egal auf welchen Link ich klicke?

                    Tutorial zu position

                    Matthias

                    --
                    1/z ist kein Blatt Papier.

                  2. مرحبا

                    Bitte entschuldige, wenn ich etwas zu schroff geworden bin.

                    Es hielt sich im Rahmen :)

                    Ich bin neulich in einem PHP-Forum gleich geblockt worden als "wir sind hier kein Support für Fertig-Lösungen",

                    Nur um Missverständnisse auszuschliessen, was ich hier poste sind keine Fertig-Lösungen, wenn dann kleine Starthilfen, die ich in wenigen Minuten schreibe.
                    Und ja, hier wird man nicht Selten auf die gleiche Weise geblockt, wie in deinem PHP-Forum.

                    Ich habe immer nur fertige Beispiele gefunden, die ich aber irgenwie nicht wirklich bei mir anwenden konnte.

                    Wie erstellst du deine Webseiten, machst du das HTML, oder irgendeine Software?

                    Deswegen jetzt hier tatsächlich mal meine Vorstellungen:
                    http://www.ich-verkaufe-mein-bild.de/2012-07-23_184152.jpg

                    Ich habe das Menu etwas aufgepeppt, damit du siehst, wie einfach das ist.
                    Die Links auf deiner Seite sind eine Liste, kein div, daher versuche das HTML, was ich hier poste, in deine Seite zu bekommen. In diesem Fall ohne "div", sondern als "ul". "ul" kannst du genauso stylen wie div, daher sollte das kein Problem darstellen.

                    Hier mal die schönere Version.
                    http://jsfiddle.net/bwTD3/show/
                    http://jsfiddle.net/bwTD3/ (der Quelltext)

                    An der linken Seite soll die Suche eingebaut werden, die fixiert ist und am Besten immer die gesamte Höhe des Browsers einnehmen soll.

                    Das ist ja mit das einfachste, position:fixed; height:100%; für die Box sollte schon genügen.

                    Mir fehlt hier tatsächlich nur noch der aufklappende Rahmen, der aber immer unter dem jeweilgen Link erscheinen soll.

                    Tut es in meinen Beispielen.

                    aber das geht doch gar nicht mit einer absluten Positionierung, oder? Erscheint der aufklappende Kasten dann nicht immer an der selben Stelle des Fensters, egal auf welchen Link ich klicke?

                    Siehe Matthias Tutorial.

                    mfg

    2. Super Leute,
      ich hatte zwar noch ein wenig zu kämpfen, denn als ich den Code so übernehmen wollte wie beschrieben, war meine Leiste erst einmal wieder weg.
      Aber nachdem ich mich jetzt reingelesen habe in die Positionierungen und die Vererbungen, habe ich es endlich hinbekommen.
      Vielen lieben Dank und bis zum nächsten Problemchen ;-)
      JaiMe