lars: Dropdown Menü

Hallo

Ich möchte ein Dropdown Menü erstellen.
Doch leider funktioniert funktioniert es nicht so wie ich das möchte...
Ich habe bereits etliche Tutorials ausprobiert.

<html>  
  <head>  
    <title>Dropdown</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
  </head>  
  
<body>  
 <!--Menue-->  
 <div class="menue">  
  <ul class="dropdown" id="mainmenu">  
  <li><a href="">Test1</a>  
  <ul>  
  <li>Test1</li>  
  <li>Test2</li>  
  <li>Test3</li>  
  </ul>  
  
  <a href="">Test2</a>  
  <a href="">Test3</a>  
  <a href="">Test4</a>  
  
 </div>  
  
</body>  
</html>
/*CSS File/*  
/*Body*/  
body {  
 font-family:'Verdana','Arial','Helvetica','sans serif'; font-size:12px; color:black;  
 line-height:20px; background:white;  
}  
  
/*Menü*/  
 .menue {  
background-color: #FFEC8B;  
padding: 5px;  
width: 150px;  
float: left;  
position: absolute;  
top: 170px;  
left: 0px;  
}  
  
.menue a {  
display: block;  
background-color: blue;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #ffffff;  
}  
  
.menue a:hover {  
background-color: yellow;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #000000;  
}  
  
ul.dropdown  
{  
    list-style: none;  
    margin:0px;  
    z-index:99;  
 background-color: #FFEC8B;  
 padding: 5px;  
 width: 150px;  
 float: left;  
 position: absolute;  
 top: 170px;  
 left: 0px;  
}  
  
ul.dropdown * ul  
{  
    list-style: none;  
    margin:0;  
    padding: 0;  
 display:none;  
 position:absolute;  
 z-index:99;  
 width:20em;  
}  
  
ul.dropdown li  
{  
    float:left;  
    position: absolut;  
    left: 150px;  
}  
  
ul.dropdown li * li  
{  
    border:1px solid #fff;  
    float:none;  
  
    position: relative;  
}  
  
ul.dropdown ul * ul  
{  
    left:98%;  
    top:0;  
  
}  
  
ul.dropdown a  
{  
    display:block;  
 background-color: blue;  
 border-bottom: 1px solid #000000;  
 margin-bottom: 2px;  
 padding: 3px;  
 color: #ffffff;  
  
}  
  
ul dropdown a:hover {  
 background-color: yellow;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #000000;  
}  
  
ul.dropdown ul * a  
{  
    height:100%;  
}  
  
ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul  
{  
    display:none;  
}  
  
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul  
{  
    display:block;  
 background-color: yellow;  
 border-bottom: 1px solid #000000;  
 margin-bottom: 2px;  
 padding: 3px;  
 color: #000000;  
}  
  

Wenn man in der HTML-Datei die ul und li rauslöscht sieht man wie das Design eiegntlich sein sollte.
Ich möchte das nun das Dropdown Menü rechts neben dem Menü erscheint.

Danke für eure Hilfe

mfg

  1. Hallo

    Ich möchte ein Dropdown Menü erstellen.
    Doch leider funktioniert funktioniert es nicht so wie ich das möchte...
    Ich habe bereits etliche Tutorials ausprobiert.
    <!--Menue-->

    <div class="menue">
      <ul class="dropdown" id="mainmenu">
         <li><a href="">Test1</a>
            <ul>
               <li>Test1</li>
               <li>Test2</li>
               <li>Test3</li>
            </ul>
            <a href="">Test2</a>
            <a href="">Test3</a>
            <a href="">Test4</a>

    Hier fehlt etwas in deinem Code

    </div>

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
       <°)))o><                      ><o(((°>o
    1. mittlerweile läuft es schon.

      /*CSS File/*  
      /*Body*/  
      body {  
       font-family:'Verdana','Arial','Helvetica','sans serif'; font-size:12px; color:black;  
       line-height:20px; background:white;  
      }  
        
      /*Menü*/  
       .menue {  
      background-color: #FFEC8B;  
      padding: 5px;  
      width: 150px;  
      float: left;  
      position: absolute;  
        
      }  
        
      .menue a {  
      display: block;  
      background-color: blue;  
      border-bottom: 1px solid #000000;  
      margin-bottom: 2px;  
      padding: 3px;  
      color: #ffffff;  
      }  
        
      .menue a:hover {  
      background-color: yellow;  
      border-bottom: 1px solid #000000;  
      margin-bottom: 2px;  
      padding: 3px;  
      color: #000000;  
      }  
        
      ul.dropdown {  
          list-style: none;  
          margin:0px;  
          z-index:99;  
       background-color: #FFEC8B;  
       padding: 5px;  
       width: 150px;  
       float: left;  
       position: absolute;  
       top: 170px;  
       left: 0px;  
      }  
        
      ul.dropdown * ul {  
          list-style: none;  
          margin:0;  
          padding: 0;  
       display:none;  
       position:absolute;  
       z-index:99;  
       width:20em;  
      }  
        
      ul.dropdown li {  
          float:left;  
          position: absolut;  
          left: 150px;  
       }  
        
      ul.dropdown li * li {  
          border:1px solid #fff;  
          float:none;  
          position: absolut;  
      }  
        
      ul.dropdown ul * ul {  
          left:98%;  
          top:0;  
        
      }  
        
      ul.dropdown a {  
          display:block;  
       background-color: blue;  
       border-bottom: 1px solid #000000;  
       margin-bottom: 2px;  
       padding: 3px;  
       color: #ffffff;  
        
      }  
        
      ul.dropdown a:hover {  
      background-color: yellow;  
      border-bottom: 1px solid #000000;  
      margin-bottom: 2px;  
      padding: 3px;  
      color: #000000;  
      }  
        
      ul.dropdown ul * a {  
          height:100%;  
      }  
        
      ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {  
          display:none;  
      }  
        
      ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {  
          display:block;  
       background-color: blue;  
       border-bottom: 1px solid #000000;  
       margin-bottom: 2px;  
       padding: 3px;  
       color: #000000;  
       position: absolute;  
       left: 150px;  
      }  
        
      div.blau {  
       width:144px;  
      }  
        
      
      

      [code lang=html]<html>
        <head>
          <title>Dropdown</title>
          <link rel="stylesheet" type="text/css" href="styles.css">
        </head>

      <body>
       <!--Menue-->
       <ul class="dropdown" id="mainmenu">
        <li><a href=""><div class="blau">Test1</div></a>
         <ul>
         <li>blub</li>
         <li>blub</li>
         <li>blub</li>
         </ul>
        <li><a href=""><div class="blau">Test2</div></a>
         <ul>
         <li>blub</li>
         <li>blub</li>
         <li>blub</li>
       </ul>

      </body>
      </html>[/color]

      das dropdown menü wird jedoch noch ein wenig zu weit unten angezeigt...
      wie mache ich dass es direkt neben dem "button" steht auf dem ich mich mit der maus befinde???

      thx

      1. <body>
        <!--Menue-->
        <ul class="dropdown" id="mainmenu">
          <li><a href=""><div class="blau">Test1</div></a>

        Das ist aber kein gesundes HTML
        ein <a> Element darf keine Blockelemente beinhalten.
        http://de.selfhtml.org/html/referenz/elemente.htm#a

        mfg Beat

        --
        Woran ich arbeite:
        X-Torah
        ><o(((°>    ><o(((°>
           <°)))o><                      ><o(((°>o
        1. <body>
          <!--Menue-->
          <ul class="dropdown" id="mainmenu">
            <li><a href=""><div class="blau">Test1</div></a>

          Das ist aber kein gesundes HTML
          ein <a> Element darf keine Blockelemente beinhalten.
          http://de.selfhtml.org/html/referenz/elemente.htm#a

          mfg Beat

          aber wie kann ich dann machen, dass es blau wird?
          und wie kann ich machen, dass das untermenü direkt neben dem button aufgeht?

          1. aber wie kann ich dann machen, dass es blau wird?

            Dafür brauchen wir aber nicht extra ein Element.

            und wie kann ich machen, dass das untermenü direkt neben dem button aufgeht?

            In diesem Fall ist die geeignete Eigenschaft:
            menu a.haupteintrag {float:left; width:10em;}

            Ein gefloatetes Element ist automatisch ein Blockelement, und ihm lassen sich Blockeelement Eigenschaften wie width und height zuweisen.

            Dann kannst du dem untergeordneten ul Element diese Eigenschaft spendieren:

            menu a.haupteintrag ul {margin-left:10em;}

            mfg Beat

            --
            Woran ich arbeite:
            X-Torah
               <°)))o><                      ><o(((°>o
            1. <html>  
                <head>  
                  <title>Dropdown</title>  
                  <link rel="stylesheet" type="text/css" href="styles.css">  
                </head>  
                
              <body>  
               <!--Menue-->  
               <ul class="dropdown" id="mainmenu">  
                <li><a href="">Test1</div></a>  
                 <ul>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 </ul>  
                <li><a href="">Test2</div></a>  
                 <ul>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
               </ul>  
                
              </body>  
              </html>
              
              <html>  
                <head>  
                  <title>Dropdown</title>  
                  <link rel="stylesheet" type="text/css" href="styles.css">  
                </head>  
                
              <body>  
               <!--Menue-->  
               <ul class="dropdown" id="mainmenu">  
                <li><a href="">Test1</div></a>  
                 <ul>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 </ul>  
                <li><a href="">Test2</div></a>  
                 <ul>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
                 <li><a href="">blub</a></li>  
               </ul>  
                
              </body>  
              </html>
              

              Den blauen Hintergrund der Buttons habe ich nun anders gemacht.
              Aber wie ich das Untermenü nun auf die höhe des Buttons bringen kann, begreiffe ich iwie nicht...

              1. [code lang=html]<html>
                  <head>
                    <title>Dropdown</title>
                    <link rel="stylesheet" type="text/css" href="styles.css">
                  </head>

                <body>
                <!--Menue-->
                <ul class="dropdown" id="mainmenu">
                  <li><a href="">Test1</div></a>

                Da hast du immer noch nicht aufgeräumten Code, nämlich das </div>

                Wie wärs mit einem Browser Plugin für Firefox?
                http://users.skynet.be/mgueury/mozilla/
                Das nimmt dir viel Stress ab.

                Den blauen Hintergrund der Buttons habe ich nun anders gemacht.
                Aber wie ich das Untermenü nun auf die höhe des Buttons bringen kann, begreiffe ich iwie nicht...

                Das kann/will ich dir auch nicht anders erläutern, weil ich keine Fertig-Menus kostenlos abliefere.

                Ich hoffe einfach, dass die die hiessige Dokumentation zu CSS eifrig am studieren bist.
                Du kannst dich auch darum herum mogeln, und dich hier kopierend befriedigen.

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

                mfg Beat

                --
                Woran ich arbeite:
                X-Torah
                     ><o(((°>   <°)))o><                      ><o(((°>o
                1. [url=http://img80.imageshack.us/my.php?image=dropdownrh8.jpg][img=http://img80.imageshack.us/img80/9717/dropdownrh8.th.jpg][/url]

                  Zur Zeit sieht das so aus...
                  Das Untermenü wird zu weit unten angezeigt. Kann mir niemand einen Tipp geben?

                  1. http://img80.imageshack.us/my.php?image=dropdownrh8.jpg
                    Hier nochmal der Link.

                2. Hallo.

                  Ich hoffe einfach, dass die die hiessige Dokumentation zu CSS eifrig am studieren bist.

                  Nä?
                  MfG, at

                  1. Hallo :)

                    http://de.wikipedia.org/wiki/Rheinische_Verlaufsform
                    MfG, at

                    Ja, diese syntaktische Konstruktionsart verläuft tatsächlich
                    vom Rheinknie bis hinunter zur Rheinmündung und meint doch nicht den Rheinverlauf,
                    sondern das Kontinuativ, das in vielen Sprachen zu Hause ist.

                    Ich grüße freundlich - ach was viel zu punktuell -
                    Ich bin hier stets freundlich am Grüßen
                    cygnus

                    --
                    Die Sache mit der Angel und dem  ><o(((°>  hat immer einen Haken ...
                    1. Hallo.

                      Ja, diese syntaktische Konstruktionsart verläuft tatsächlich
                      vom Rheinknie bis hinunter zur Rheinmündung und meint doch nicht den Rheinverlauf,
                      sondern das Kontinuativ, das in vielen Sprachen zu Hause ist.

                      Panta rhein -- alles ist am fließen.
                      MfG, at

                  2. Hallo.

                    Ich hoffe einfach, dass die die hiessige Dokumentation zu CSS eifrig am studieren bist.

                    Nä?

                    Offenbar ein überflüssiger Helvetismus. Population folgt im Anhang.

                    mfg Beat

                    --
                    Woran ich arbeite:
                    X-Torah
                                     /|
                      <°)))o><      / |    /|
                                ---- _|___/ |     ><o(((°>
                               OvVVvO    __ |         ><o(((°>
                    <°)))o><  /v    v\/  |
                     <°)))o>< ^    ^/_/_         ><o(((°>
                               ^^^^/___/
                    ><o(((°>    ----       ><o(((°>
                       <°)))o><                      ><o(((°>o
                    1. Hallo.

                      Offenbar ein überflüssiger Helvetismus.

                      Das wäre dann der erste.

                      Population folgt im Anhang.

                      Lass dir ruhig Zeit. Neben mir liegt ein Buch aus mit Roter Bete gefärbtem Papier, das seit einiger Zeit und wohl auf Jahre hinaus mein literarisches Aufnahmevermögen ausreizen wird. Der Übersetzer hat ganze Arbeit darin geleistet, dass kaum jemand sein Werk schneller liest als er es geschrieben hat.
                      MfG, at