Dropdown Menü - Anfänger

Hallo Zusammen,
hab ein dummes Problem. Ich blicks einfach gerade nicht...

Ich will ein einfaches Dropdown menü.
Das Problem ist das ich nicht weiß wie ich mein CSS Code ändere das es passt und so aussieht wie davor.

um diese Seite geht es: www.timresl.de/sites/tc-neuenhaus.de

Ich hab einfach mal die Dateien zusammengepackt und hier könnt ihr die rar datei runterladen: http://timresl.de/tc-neuenhaus.de.rar

Ich will einfach nur das ein mini kleiner Dropdown entsteht mit hintergrundfarbe eigentlich ganz leicht aber ich bin ein totaler noob in sachen Javascript. wär hammer wenn mir jemand nur kurz helfen kann.. Ich denke für euch ist das pipifax.

Vielen Dank.
Falls ihr es mir i.wie zukommen lassen wollt hier meine mail adresse. t i m . r e s l @ web.de

Falls ihr mir tipps im Forum gibt ich nehm alles an. Dankeschön

Ich verstehe nicht was du willst.

Auf der Seite ist einfach nur ein hover-Menü mit falscher Positionieren des Untermenüs - das hast aber nichts mit JS zu tun...

Ich weiß nicht wie Du da auf Javascript kommst,
denn es ist ein reines CSS-Problem,
deswegen verschiebe ich Dich in's dazu passende Subforum.

http://www.htmldog.com/articles/suckerfish/dropdowns/

Code:

---

#templatemo_menu #navigation li ul {
        display:none;       
        position:absolute;
        top:4em;
        left:0em;
        margin:0;
        padding:0;
}

---

Damit die Unterpunkte angezeigt bleiben, müsstest du nur die Angaben in Rot übernehmen. Was meinst du mit 'Hintergrundfarbe'?

Wenn du den Hintergrund der Dropdown-Menüpunkte ändern willst, musst du die Grafiken ändern oder rausnehmen. Ich hab dir mal ein Beispiel ohne Grafiken mit ner Hintergrundfarbe gebastelt:

Code:

---

#templatemo_menu  li.current a, #templatemo_menu  li a:hover{
        color: #fff;
        text-decoration: none;
        background: #CA6F1F;
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: #CA6F1F;
}

---

Edit: ..oder aber du lässt die bisherigen CSS-Angaben drin, damit die Grafiken bleiben und setzt zusätzlich für die Untermenüs ein:

Code:

---

#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li{
        color: #fff;
        text-decoration: none;
        background: #C5651A;
        margin-left:2px;

}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: #C5651A;
        width:100px;
        text-align:left;
}

---

Dankeschön das hat mich jetzt zum glück ein wenig weiter gebracht.

Bei Home funkt es jetzt so wie ich will. aber bei den anderen ja nicht mehr weil immer das as aktiv ist, ist mit class current gezeichnet. Wie setz ich das jetzt auch ein das es bei den nicht current klassen mit dropdown funktioniert?!

Code:

---

/* menu */
#templatemo_menu {
        clear: both;
        position: relative;
        width: 920px;
        margin: 0 20px;
        height: 45px;
        background: url(images/templatemo_menu_bg.jpg) right no-repeat;
}

#templatemo_menu span {
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 45px;
        background: url(images/templatemo_menu_bg_left.jpg) no-repeat;
}

#templatemo_menu ul{
        padding: 0 0 0 10px;
        margin: 0 auto;
        height: 45px;
        list-style: none;
}

#templatemo_menu ul li{
        float:left;
        padding-right: 5px;
        position:relative;
}

#templatemo_menu li a{
        float: left;
        display: block;
        color: #000;
        font-size: 12px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        padding: 0px 0 0 8px;       
}
#templatemo_menu  li a b{
        float: left;
        display: block;
        padding: 4px 24px 0 16px;
}
#templatemo_menu  li.current a, #templatemo_menu  li a:hover{
        color: #fff;
        text-decoration: none;
        background: url(images/menu_hover_bg_left.jpg) left top no-repeat;
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: url(images/menu_hover_bg.jpg) right top no-repeat;
}

/* menu dropdown customizations*/
#templatemo_menu ul li{
        position:relative;

}

#templatemo_menu #navigation li ul {
        display:none;       
        position:absolute;
        top:4em;
        left:0em;
        margin:0;
        padding:0;
       

}


#templatemo_menu #navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */

}

#templatemo_menu #navigation li ul li {
        display:block;
        float:none;
        margin-bottom:0.2em;

}



#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li{
        color: #fff;
        text-decoration: none;
        background: #C5651A;
        margin-left:2px;
               
                border-top-style: none;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
        height: 40px;

}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: #C5651A;
    width:100px;
    text-align:left;
 
    height: 40px;
}

/* end menu dropdown customizations*/


/* end of menu */

---

Code:

---


    <div id="templatemo_menu">
            <span></span>
           
           
           
        <ul id="navigation">
            <li class="current"><a href="index.html"><b>Home</b></a>
                    <ul ><li><a href="index.html"><b>Test1</b></a></li> <li><a href="index.html"><b>Test2</b></a></li><li><a href="index.html"><b>Test2</b></a></li></ul>
            </li>
           
            <li ><a href="index.html"><b>Verein</b></a>
            <ul >
                            <li><a href="index.html"><b>Test1</b></a></li>
                            <li><a href="index.html"><b>Test2</b></a></li>
            <li><a href="index.html"><b>Test2</b></a></li>
              </ul>
            </li>
            <li><a href="#"><b>Mannschaften</b></a></li>
            <li><a href="#"><b>Termine</b></a></li>
            <li><a href="#"><b>Presse</b></a></li>
            <li><a href="#"><b>Bildportal</b></a></li>
            <li><a href="#"><b>Interaktiv</b></a></li>
        </ul>

  </div> <!-- end of menu -->

---

So sieht es momentan aus: www.timresl.de/sites/tc-neuenhaus.de


Vielen Herzlichen Dank

Du nimmst noch ne Anweisung für die nicht aktiven Menüpunkte dazu - jeweils rot:

Code:

---

#templatemo_menu  li.current a, #templatemo_menu  li a:hover, #templatemo_menu ul li:hover a{
        color: #fff;
        text-decoration: none;
        background: url(images/menu_hover_bg_left.jpg) left top no-repeat;
}
#templatemo_menu  li.current a b, #templatemo_menu li a:hover b, #templatemo_menu ul li:hover a b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: url(images/menu_hover_bg.jpg) right top no-repeat;
}

#templatemo_menu ul li.current ul li a, #templatemo_menu ul li a:hover ul li, #templatemo_menu ul li:hover ul li a{
        color: #fff;
        text-decoration: none;
        background: #C5651A;
        margin-left:2px;               
        border-top-style: none;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
        height: 40px;
}
#templatemo_menu ul li.current  ul li a b, #templatemo_menu ul li ul li a:hover b, #templatemo_menu ul li:hover ul li a b{
        color: #fff;
        padding-top: 0px;
        text-decoration: none;
        background: #C5651A;
        width:100px;
        text-align:left; 
        height: 40px;
}

---

Vielen Dank!!!

bekommt man jetzt noch hin das es Pro Hover über die dropdownmenüs eine andere HG Farbe zuordnen.

Wenn ich über Test fahre soll es z.B.: roter werder?! geht das?

Zusätzlich einfügen:

Code:

---

#templatemo_menu ul li:hover ul li a:hover, #templatemo_menu ul li:hover ul li a b:hover{
background:red;
}

---

Setzt die Farbe ein, die dir zusagt.

BTW Hast du versucht herauszufinden, warum wann welche Aktion passiert?

warum kann ich im IE nicht Test 3 auswählen.. Ausserdem sind die kästen ziehmlich weit auseinander... im Firefox passt alles :-()

Nun, Test 3 kannst du nicht auswählen, der steht gar nicht im Markup. (Du hast Test 2 doppelt reingeschrieben.) :D

Ok, der IE 7 zickt in der Tat rum. Hatte den Test nur im Fx gemacht und jetzt gesehen, dass auch Opera und der IE 8 zufrieden sind. Den 7er bekommst du ebenfalls auf Linie, indem du die jeweils rot markierten Attribute rausnimmst.

Code:

---

#templatemo_menu ul{
        padding: 0 0 0 10px;
        margin: 0 auto;
        height: 45px;
        list-style: none;
}
#templatemo_menu #navigation li ul li {
        display:block;
        float:none;
        margin-bottom:0.2em;
}

---

Super. aber siehst du wenn du im IE von Verein auf auf Home gehst das dann des dropdown wie eine Treppe aussieht? von was kommt das?

Kann man das auch ändern?
Vielen Dank

Man sieht diese Treppe nur, wenn man vom Punkt Verein direkt nach links zu Home geht, ist aber trotzdem nicht schön.
Hier steht bisher nur eine Anweisung, die beiden in Rot noch dazunehmen.

Code:

---

#templatemo_menu #navigation li ul li, #templatemo_menu ul li.current ul li a, #templatemo_menu ul li:hover ul li a b{
        display:block;
        float:none;
}

---

Meinst du, wir bekommen das noch vor Pfingsten fertig?