lars: Dropdown Menü

SELF-Forum

Dropdown Menü

lars
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dropdown Menü

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dropdown Menü

      lars
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dropdown Menü

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        <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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Dropdown Menü

          lars
          – Informationen zu den Bewertungsregeln

          <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?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Dropdown Menü

            Beat Homepage des Autors
            – Informationen zu den Bewertungsregeln

            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
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Dropdown Menü

              lars
              – Informationen zu den Bewertungsregeln 
              <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...

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Dropdown Menü

                Beat Homepage des Autors
                – Informationen zu den Bewertungsregeln

                [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
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Dropdown Menü

                  lars
                  – Informationen zu den Bewertungsregeln

                  [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?

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Dropdown Menü

                    lars
                    – Informationen zu den Bewertungsregeln

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

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                2. Dropdown Menü

                  at
                  – Informationen zu den Bewertungsregeln

                  Hallo.

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

                  Nä?
                  MfG, at

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Regen Menü

                    cygnus
                    – Informationen zu den Bewertungsregeln

                    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 ...
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Regen Menü

                      at
                      – Informationen zu den Bewertungsregeln

                      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

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                  2. Dropdown Menü

                    Beat Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    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
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Dropdown Menü

                      at
                      – Informationen zu den Bewertungsregeln

                      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

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln