✔ Drop Down Menü

[SexontheBeach]

Hallo Community,
ich brauche unbedingt hilfe, da ich es leider nicht alleine hinbekomme.

Ich möchte mir gerne ein Drop-Down Menü bastelln.
Es soll 4 verschiedene Überschriften haben.

blub bla klick tings

Dann möchte ich für jedes Dropdown Menü ein Background haben.

EXAMPLE:

Das z.B. für blub

und das für bla

Wenn man jetzt mit der Maus auf blub geht soll sich ein Menü runtergklappen mit zb. text1
text2
text3

Mit dem selben background wie blub

Ich hoffe man versteht was ich meine..

Schönen Abend

 

[Maik]

Hi,

ich empfehle dir hierzu folgende Artikel / Tutorials:

• Suckerfish Dropdowns
• Hybride CSS Menüs
• CSS-Rollover (falls erforderlich)

mfg Maik

 

[SexontheBeach]

Danke schonmal.
Mein Problem ist nur, das ich das mit den Bildern nie so richtig hinbekomme.
Ähnliche Seiten habe ich mir schon angeuckt.

 

[Maik]

Das grundsätzliche Beispiel zum Einbinden der unterschiedlichen Hintergrundbilder für die jeweiligen Menüpunkte könnte beispielsweise so lauten:

<ul id="nav">
    <li id="blub"><a href="#">blub</a>
           <ul>
               <li><a href="#">text 1</a></li>
               <li><a href="#">text 2</a></li>
               <li><a href="#">text 3</a></li>
           </ul>
    </li>
    <li id="bla"><a href="#">bla</a>
           <ul>
               <li><a href="#">text 1</a></li>
               <li><a href="#">text 2</a></li>
               <li><a href="#">text 3</a></li>
           </ul>
    </li>
</ul>

ul#nav, ul#nav ul {
margin:0;
padding:0;
list-style:none;
}
ul#nav li {
float:left;
}
ul#nav li ul li {
float:none;
}
ul#nav li#blub a {
display:block;
width:120px;
height:30px;
background:url(1.jpg);
}
ul#nav li#bla a {
display:block;
width:120px;
height:30px;
background:url(green.jpg);
}

mfg Maik

 

[SexontheBeach]

Danke für die Antwort!

Leider glaube ich das du mich nicht richtig verstanden hast

Was du mir gebastellt hast sieht so aus

oliver.w.idoo.com/test

Ich möchte gerne ein Drop Down Menü bzw Navi bauen.

Wie bei http://www.fxencore.de/ nur mit den Bildern.

Gruß SexontheBeach

 

[Maik]

Nö, ich hab dich überhaupt nicht falsch verstanden, und was ich dir gestern Abend vorgestellt habe, weiß ich selbst.

Du willst in den Menüpunkten unterschiedliche Hintergrundbilder verwenden, und wie die sich einbinden lassen, hab ich dir gestern Abend demonstriert, da du nach eigener Aussage damit bislang nicht zurechtgekommen bist - mein Beispiel enthielt hierbei aber noch kein gebrauchsfertiges "Dropdown-Menü".

Mit diesen beiden Regelerweiterungen im Stylesheet hast du dein "Dropdown-Menü":

ul#nav li ul { display:none; }
ul#nav li:hover ul { display:block; }

mfg Maik

 

[SexontheBeach]

Danke Maik

Wie bekomme ich die Schrift jetzt mittig?

Mit Padding?! Aber wo soll ich das einsetzten ?

Gruß SexontheBeach

 

[Maik]

ul#nav li#blub a {
display:block;
width:120px;
line-height:30px; /* vertikale Zentrierung */
background:url(1.jpg);
text-align:center; /* horizontale Zentrierung */
}
ul#nav li#bla a {
display:block;
width:120px;
line-height:30px; /* vertikale Zentrierung */
background:url(green.jpg);
text-align:center; /* horizontale Zentrierung */
}

mfg Maik

 

[SexontheBeach]

Danke Maik.

Das DropDown Menü zerreist das Menü
http://oliver.w.idoo.com/test/

Was habe ich da falsch gemacht?

 

[Nord-Süd-Richtung]

Hi

du könntest es mit dem z-index probieren