Tributer: Drop Down Menu verschwindet wieder

Hallo zusammen,

ich habe auf dieser Seitehttp://tributer.spacequadrat.de/ ein Drop-Down Menu erstellt. (Bzw. es versucht)

Allerdings verschwindet es wieder wenn man den Button verlässt.

Die Codes dafür sehen so aus.

HTML:

  
<ul id="menu" >  
<li><a href="">Home</a>  
<div><a href="">News</a>  
	<a href="">Weiteres</a></div>  
</li>

CSS:

ul#menu  {  
  
     width: 800px;  
     height: 40px;  
     margin: Auto;  
     padding: 0px;  
     Background-color: #033649;  
	  
  
}  
  
ul#menu li  {  
     width: 198px;  
     height: 28px;  
     float: left;  
     list-style: none;  
     border: 1px solid black;  
     display: Block;  
     text-align: center;  
     padding-top: 0px;  
   }  
  
ul#menu li>div {  
	display:none  
}  
  
ul#menu li:hover div  {  
display: block;  
  
}  
  
  
  
ul#menu li:hover  {  
     width: 198px;  
     height: 28px;  
     float: left;  
     list-style: none;  
     border: 1px solid black;  
     display: Block;  
     text-align: center;  
     padding-top: 0px;  
     background-color: #666666;  
}  
  
ul#menu a  {  
     color: #FFFFFF;  
     text-decoration: none;  
     font-size: 20px;  
	 width: 198px;  
	 height: 32px;  
	 background-image: url(but.jpg);  
	 display:block;  
	 padding-top: 8px;  
}  
  
ul#menu a:hover {  
	color:#3F0;  
}

Leider komme ich nicht auf meinen Fehler.

Hat vielleicht wer eine Lösung?

Mfg Tributer

  1. Hi,

    ich habe auf dieser Seitehttp://tributer.spacequadrat.de/ ein Drop-Down Menu erstellt. (Bzw. es versucht)

    Warum mit einem DIV für die Untermenüpunkte?
    Zeichne auch diese als Liste aus.

    Allerdings verschwindet es wieder wenn man den Button verlässt.

    Natürlich, weil man ja auch das LI wieder verlässt.

    ul#menu li  {
         height: 28px;

    Schliesslich ist es nur 28px hoch,

    ul#menu a  {
         height: 32px;
         display:block;

    und damit ragt der Link unten aus ihm hinaus; wenn man also mit dem Mauszeiger über den unteren Teil des Links geht, hat man damit das LI wieder verlassen.

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Ok hab das mal als Liste gemacht.

      Allerdings bekomme ich das jetzt nicht sauber untereinander.

      Siehe Online

      CSS:~~~css ul#menu  {

      width: 800px;
           height: 40px;
           margin: Auto;
           padding: 0px;
           Background-color: #033649;

      }

      ul#menu li  {
           width: 198px;
           height: 28px;
           float: left;
           list-style: none;
           border: 1px solid black;
           display: Block;
           text-align: center;
           padding-top: 0px;
         }

      ul#menu li>ul {
      display:block;
      }

      ul#menu li:hover ul  {
      display: block;
      }

      ul#menu ul  {
      position: relative;
      margin: auto;
      list-style: none;
      }

      ul#menu li:hover  {
           width: 198px;
           height: 28px;
           float: left;
           list-style: none;
           border: 1px solid black;
           display: Block;
           text-align: center;
           padding-top: 0px;
           background-color: #666666;
      }

      ul#menu a  {
           color: #FFFFFF;
           text-decoration: none;
           font-size: 20px;
      width: 198px;
      height: 32px;
      background-image: url(but.jpg);
      display:block;
      padding-top: 8px;
      }

      ul#menu a:hover {
      color:#3F0;
      }

        
      ~~~html
      <ul id="menu" >  
      <li><a href="">Home</a>  
      <ul><li><a href="">News</a></li>  
      	<li><a href="">Weiteres</a></li>  
      </ul>  
      </li>  
      <li><a href="">About</a>  
      <ul><li><a href="">News</a></li>  
      	<li><a href="">Weiteres</a></li>  
      </ul>
      

      Vielen Dank schon mal für die Hilfe

      1. ul#menu li  {
             width: 198px;
             height: 28px;
             float: left;
             list-style: none;
             border: 1px solid black;
             display: Block;
             text-align: center;
             padding-top: 0px;
           }

        ul#menu li>ul {
        display:block;
        }

        Die innere Liste musst du absolut positionieren.
        Denn du willst ja nicht, dass bei der Anzeige sich der Inhalt verschiebt.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Was muss ich denn genau dafür ändern?

          habe jetzt.
           ~~~css ul#menu li  {
               width: 198px;
               height: 28px;
               float: left;
               list-style: none;
               border: 1px solid black;
               display: Block;
               text-align: center;
               padding-top: 0px;
             }

          ul#menu li>ul {
          display:none;
          position:absolute;
          }

          ul#menu li:hover ul  {
          display: block;
          }

          ul#menu ul  {
          position: relative;
          margin: auto;
          list-style: none;
          }

            
          ~~~html
          <ul id="menu" >  
          <li><a href="">Home</a>  
          <ul class="drop"><li><a href="">News</a></li>  
          	<li><a href="">Weiteres</a></li>  
          </ul>
          

          Ohne per class .drop den Float zu clearen sind sie nebeneinander. Jedoch auch noch verschoben.

          Mit der Aufhebung des Floats siehts aus wie vorher..

          Ich glaub ich versteh dich nicht richtig.

          Die Aktuelle variante ist auch wieder hochgeladen.

          Mfg Michael

          1. Grade nochmal ein bisschen rumprobiert aber wird nicht besser.

            Ich würds gerne verstehen.

            Aber den Float aufheben muss ich doch.

            1. Grade nochmal ein bisschen rumprobiert aber wird nicht besser.

              Ich würds gerne verstehen.

              Aber den Float aufheben muss ich doch.

              Absolut positionieren:
              Absolut positioniert wird ein Alement relativ zu einem parent, der nicht static positioniert ist.
              Wenn du die ul mit position:absolute versiehst, musst du dem parent li  ein position:relative verleihen.
              Ausrichten kannst du mit top left bottum oder right.

              Verstehen heisst lesen, nämlich die Dokumentation.

              mfg Beat

              --
              ><o(((°>           ><o(((°>
                 <°)))o><                     ><o(((°>o
              Der Valigator leibt diese Fische
            2. Hi,

              Grade nochmal ein bisschen rumprobiert aber wird nicht besser.

              Ich würds gerne verstehen.

              http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

              MfG ChrisB

              --
              Light travels faster than sound - that's why most people appear bright until you hear them speak.
            3. Grade nochmal ein bisschen rumprobiert aber wird nicht besser.

              Das zählt wohl zu den Dingen die man beim Arzt nicht hören will :)

              SCNR

              1. Grade nochmal ein bisschen rumprobiert aber wird nicht besser.

                Das zählt wohl zu den Dingen die man beim Arzt nicht hören will :)

                Navigationen sind Krankenkassetauglich? Das erklärt alles!

                mfg Beat

                --
                ><o(((°>           ><o(((°>
                   <°)))o><                     ><o(((°>o
                Der Valigator leibt diese Fische