Problem: Dropdown-Menu gestalten

CooKie_KO · 2. April 2013

Hallo liebe Community,

ich bin erst seit einigen Tagen in der Welt von html und css. Bin also absolut noch in der Lernphase, aber bastel parallel zu meinen Lernfortschritten schon an einer Seite rum. Bei meinem Dropdown-menu in der Navigation bin ich aber jetzt auf Probleme gestoßen, zu denen ich keine Lösungen finde. Ich freue mich auch auf eine einzelne Lösung für eins der Probleme, da ich keinen Kurs besuche, keinen Lehrer habe und somit im Internet step-by-step (auch von dir ;)) lerne.

Meine Probleme sind:

1. Die Unterpunkte des Dropdowns (Link1,2,3 und Link 1.1,1.2,2.1 etc) sollen nur gehovert werden, wenn man mit der Maus auf dem Link ist. Momentan endet das Linkfeld mit der Schrift, gehovert wird aber bis rechts an den Rand. Das heißt man kann rechts von der Schrift mit der Maus hover-effekt auslösen, aber man befindet sich nicht auf dem Link.

2. Es gelang mir nicht wirklich die momentan kleingeschriebenen, gelb markierten Untermenupunkte (Link 1.1,1.2, 2.1 etc) mit Befehlen anzusprechen. Wenn ich den Listpunkten eine ID gab, waren die Befehle an die ID wirkungslos, als Klasse konnte ich ihnen die kleinere Schrift und gelben Hintergrund geben, andere Befehle wie Padding, list-style-type und andere haben aber nicht funktioniert... Ich will im Endeffekt diese Unterpunkte einrücken, ihnen einen list-style-type geben, möglicherweise Schrifttyp ändern, und den Abstand nach oben verringern, damit sie klar als Unterpunkte zu Link1,2,3 erkennbar werden.

3. Abstand zwischen den Unterpunkten (1.1, 1.2 etc) verringern (siehe oben), damit die Liste nicht so ellenlang ist. Ich geh davon aus, dass man das mit margin-top hinkriegt, sobald man die Listenpunkte einzeln ansprechen kann (Problem 2.)

4. Wenn man auf die Übermenupunkte hovert, wird das Hoverfeld innerhalb 200ms geändert, das Dropdownmenu aber kommt sofort. Das soll auch innerhalb 200ms eingeblendet werden. Wenn ich den gleichen Befehl beim ul#navi_main li:hover>ul reinhab, hat es aber nichts geändert.

Ich hoffe ihr könnt mir weiterhelfen, entweder mit dem lösenden Gesamtcode (den kann ich lesen, nachvollziehen und davon lernen) oder mit verbaler Erklärung, dann aber bitte mit den einzelnen Codes. Denn nur "mache das und das dort" (rein verbal) wird mir möglicherweise nicht helfen, wenn ich nicht weiß wie "das und das" geht.

Freu mich schon auf hoffentlich hilfreiche Antworten.
Unten habe ich html und css kopiert.

*EDIT siehe unten

Das Dropdown-menu sieht aktuell so aus:

[Blockierte Grafik: http://s14.directupload.net/images/130402/ztukly28.jpg]

html-editor-datei sieht so aus:

<nav id="navigation">
<ul id="navi_main">
<li class="Startseite"><a href="index.html">Startseite</a>
</li>
<li class="Inhalt"><a href="content.html">Inhalt</a>
<ul class="dropdown_navi">
<li><a href="#">Linkziel 1</a></li>
<li><a href="#">Linkziel 2</a></li>
<li><a href="#">Linkziel 3</a></li>
</ul>
</li>
<li class="Angebot"><a href="offer.html">Angebot</a>
<ul class="dropdown_navi">
<li><a href="#">Linkziel 1</a></li>
<li id="test" class="test"><a href="#">Linkziel 1.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 1.2</a></li>
<li><a href="#">Linkziel 2</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.2</a></li>
<li id="test" class="test"><a href="#">Linkziel 2.3</a></li>
<li><a href="#">Linkziel 3</a></li>
<li id="test" class="test"><a href="#">Linkziel 3.1</a></li>
<li id="test" class="test"><a href="#">Linkziel 3.2</a></li>
</ul>
</li>
<li class="about"><a href="about.html">Über mich</a>
</li>
<li class="kontakt"><a href="contact.html">Kontakt</a>
</li>
</ul>
</nav>

css-datei sieht so aus:

CSS

ul{
 list-style-type: none;
}




ul#navi_main{
 text-align: center;
 font-weight: bold;
}




ul#navi_main a{
 text-decoration: none;
 color: black;
}




ul#navi_main a:hover{
 text-decoration: none;
}




ul#navi_main li{
 float: left;
 position: relative;
 list-style-type: none;
 margin-top: 15px;
 margin-left: 10px;
 line-height: 30px;
 -webkit-transition: all 200ms ease-in;
 -moz-transition: all 200ms ease-in;
 -ms-transition: all 200ms ease-in;
 -o-transition: all 200ms ease-in;
 transition: all 200ms ease-in;
}




ul#navi_main li.startseite{
 width: 100px;
 height: 30px;
}




ul#navi_main li.inhalt{
 width: 100px;
 height: 30px;
}




ul#navi_main li.angebot{
 width: 100px;
 height: 30px;
}




ul#navi_main li.about{
 width: 100px;
 height: 30px;
}




ul#navi_main li.kontakt{
 width: 100px;
 height: 30px;
}




ul#navi_main li.startseite:hover{
 width: 100px;
 height: 30px;
 background: #BFBFBF;
 border-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
 -webkit-transition: all 200ms ease-in;
 -moz-transition: all 200ms ease-in;
 -ms-transition: all 200ms ease-in;
 -o-transition: all 200ms ease-in;
 transition: all 200ms ease-in;
}




ul#navi_main li.inhalt:hover{
 width: 100px;
 height: 30px;
 background: #BFBFBF;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
}




ul#navi_main li.angebot:hover{
 width: 100px;
 height: 30px;
 background: #BFBFBF;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
}




ul#navi_main li.about:hover{
 width: 100px;
 height: 30px;
 background: #BFBFBF;
 border-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
}




ul#navi_main li.kontakt:hover{
 width: 100px;
 height: 30px;
 background: #BFBFBF;
 border-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
}




ul#navi_main li ul.dropdown_navi{
 background: #BFBFBF;
 position: absolute;
 left: 0;
 top: 30px;
 width: 150px;
 padding: 0px;
 border-top-right-radius: 10px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 box-shadow: 3px 3px 3px #000000;
}




ul#navi_main li ul li{
 float: none;
 text-align: left;
 display: block;
 padding: 0px;
 height: 20px;
 line-height: 20px;
}




ul#navi_main li ul li:hover{
 float: none;
 text-align: left;
 display: block;
 background: #EFEFEF;
 padding: 0px;
}




ul#navi_main li>ul{
 display: none;
}




ul#navi_main li:hover>ul{
 display: block;
}




.test{
 list-style-type: disc;
 list-style-position: inside;
 background: #FFFF00;
 padding-left: 5px;
 font-size: 10px;
 color: #00FFDF;
}




#test{
 list-style-type: disc;
 list-style-position: inside;
 background: #FFFF00;
 padding-left: 5px;
 font-size: 10px;
 color: #00FFDF;
}

Alles anzeigen

*EDIT:

Ich will den Thread aktualisieren, weil ich einige Dinge in den Griff kriegen konnte und ich verhindern will, dass Helfer Zeit investieren die veralteten Probleme zu untersuchen.

Aktueller Stand:
Mit einer neuen Listenstruktur, an der ich rumprobiert habe, ist es mir gelungen alles so zu gestalten, wie ich es mir vorstelle. Bei dieser anderen Struktur ist jetzt der Obermenupunkt aber nicht mehr im gehoverten Design, wenn ich die Maus auf die Untermenupunkte bewege. Wie kann ich denn die übergeordneten Listenpunkte ansprechen, wenn die untergeordneten Listenpunkte gehovert werden?

Hier ist das momentane Zwischenergebnis zu sehen:
http://jsfiddle.net/a2TnK/

(Ich bin bereits darauf hingewiesen worden, dass die ID-Vergabe an mehrere Listen nicht bei allen Browsern funktioniert. Wenn ich das selbe mit Klassen probiere, funktioniert es bei mir nicht. Diesbzgl. muss ich mir also noch was anderes überlegen oder jemand hat einen Hinweis)

unkown-6363 · 6. April 2013

Zitat von CooKie_KO

Wie kann ich denn die übergeordneten Listenpunkte ansprechen, wenn die untergeordneten Listenpunkte gehovert werden

Das geht nicht. CSS-Angaben sind "herabfallend", sprich du begibst dich immer tiefer "hinein", jedoch niemals weiter "hinaus" .. dies ist auch nicht Möglich .. allerdings gibt es da glaube ich etwas experimentelles in CSS4

CSS

---> immer tiefer hinein -->nav ul li a{     /**/}

Ich glaube du möchtest, dass der Haupt-Menüpunkt ebenfalls als überfahren gekennzeichnet wird, wenn man einen unteren überfährt/hovert, richtig?
Dann mach doch mal folgendes:

CSS

nav ul.firstLebel > li:hover /* das '>' bedeutet, dass die angabe NUR für dieses Element, diese Elemente gilt. Also an dieser Stelle zum Beispiel nicht für tieferliegende <li>'s */{    /* ganzen Menüpunkt makieren; dieser umfasst ja die untermenüpunkte */}

Zu deinem Code hier: http://jsfiddle.net/a2TnK/
Man verwendet eine id immer nur einmal pro Seite! eine id ist ja zur eindeutigen Bestimmung eines elementes (wirst du bei javascript merken).

Du meintest du hast Probleme mit den classen gehabt?
Tipp.. du brauchst an dieser Stelle garkeine ... nicht unbedingt
Mach einfach die Angaben so:

CSS

ul > li > {}ul > li > ul > li { /*durch den '>' werden hier die eigenschaften für ul > li nicht übernommen --> keine konflikte  */ }

-------------------
Inwieweit hat dir das geholfen, und wie/wo brauchst du noch Hilfe?
Habe keinen so richtigen Überblick, da du ja inzwischen weitergekommen bist und so .. fass dich diesmal bitte kurz und präzise

CooKie_KO · 13. April 2013

Zitat

Man verwendet eine id immer nur einmal pro Seite! eine id ist ja zur eindeutigen Bestimmung eines elementes (wirst du bei javascript merken).Du meintest du hast Probleme mit den classen gehabt? Tipp.. du brauchst an dieser Stelle garkeine ... nicht unbedingt. ul > li > {} ul > li > ul > li {}

Ein sehr wertvoller Tipp. In meinem Fall nicht zu 100% aufgegangen, weil ich innerhalb derselben Liste die Punkte nochmals unterschiedlich gestalten/ansteuern wollte. Aber ich habe wegen des mehrmaligen Verwendens der selben ID jedem Punkt eine eigene ID gegeben, und in Kombination mit deinem Befehl, habe ich mir damit einige Mehrfachnennungen der selben Befehle gespart. Danke

Zitat

Ich glaube du möchtest, dass der Haupt-Menüpunkt ebenfalls als überfahren gekennzeichnet wird, wenn man einen unteren überfährt/hovert, richtig?

Absolut richtig. Ich habe deinen Code verwendet, aber der gewünschte Effekt blieb aus. Deshalb hab ich mir Zeit genommen und mir sinnvoll erscheinende Varianten durchprobiert (siehe PN), ohne Erfolg. Da du mein Problem aber zu 100% verstanden hast, glaube ich, dass wir auf dem richtigen Weg sind, nur ich habe wahrscheinlich etwas falsch oder am falschen Ort eingegeben. Ein Bsp wie ich es verwendet habe war:
nav ul li.firstLebel > li:hover{
background: #003366;
font-size: 16px;
color: #F0F0F0;
border-radius: 0px; }

The Scout · 14. April 2013

Spontan kommt mir die Idee: Pack doch einfach mal deine Menüpunkte 1.1, 1.2, etc. auch in ein eigenständiges ul. Also anstatt

HTML

<ul class="dropdown_navi">
    <li><a href="#">Linkziel 1</a></li>
            <li id="test" class="test"><a href="#">Linkziel 1.1</a></li>
        <li id="test" class="test"><a href="#">Linkziel 1.2</a></li>
    <li><a href="#">Linkziel 2</a></li>
        <li id="test" class="test"><a href="#">Linkziel 2.1</a></li>
        <li id="test" class="test"><a href="#">Linkziel 2.2</a></li>
        <li id="test" class="test"><a href="#">Linkziel 2.3</a></li>
    <li><a href="#">Linkziel 3</a></li>
        <li id="test" class="test"><a href="#">Linkziel 3.1</a></li>
        <li id="test" class="test"><a href="#">Linkziel 3.2</a></li>
</ul>

Alles anzeigen

Machst du es so:

HTML

<ul class="dropdown_navi">
    <li><a href="#">Linkziel 1</a>
        <ul>
            <li id="test" class="test"><a href="#">Linkziel 1.1</a></li>
            <li id="test" class="test"><a href="#">Linkziel 1.2</a></li>
        </ul>
    </li>
    <li><a href="#">Linkziel 2</a>
        <ul>
            <li id="test" class="test"><a href="#">Linkziel 2.1</a></li>
            <li id="test" class="test"><a href="#">Linkziel 2.2</a></li>
            <li id="test" class="test"><a href="#">Linkziel 2.3</a></li>
        </ul>
    </li>
    <li><a href="#">Linkziel 3</a>
        <ul>
            <li id="test" class="test"><a href="#">Linkziel 3.1</a></li>
            <li id="test" class="test"><a href="#">Linkziel 3.2</a></li>
        </ul>
    </li>
</ul>

Alles anzeigen

Dadurch kannst du die neue <ul> auch einfach per CSS ansprechen, indem du "immer tiefer hinein" gehst
Wenn es mich nicht täuscht müsste es dann ungefähr so aussehen:

CSS

ul#navi_main ul.dropdown_navi li ul { }

CooKie_KO · 15. April 2013

The Scout
Das hatte ich schon gemacht, nachdem ich meine Listenstruktur geändert hatte. Hatte aber keinen Einfluss auf den Obermenupunkt bzgl. Hoverdesign beibehalten, wenn man in der Liste bleibt.

Ich habe in einem anderen Thread gelesen, dass es damit zu tun hat, ob die Liste oder der Link angesteuert wird. Das war mein Problem, ich wusste zu Beginn nur nicht, wie ich daran was ändern muss. Hab es aber mittlerweile rausgekriegt und kann alles so gestalten, wie es mir in den Sinn kommt. Für diejenigen, die vllt irgendwann auf diesen Thread stoßen und auch nach einer Lösung suchen, so sieht aktuell mein html und css aus und damit bleibt der Oberpunkt gehovert:
http://jsfiddle.net/PeFrG/

Damit kann man von mir aus den Thread schließen. Ich vermute, dass mein html und css außer den Sachen, auf die ich mich konzentriert habe sie zum Laufen zu bringen, wahrscheinlich sehr schlecht/unpraktisch/unfunktionell für andere browser uvm ist. Insofern würde ich mich trotzdem über PNs mit Hinweisen, Verbesserungsvorschlägen und Tipps freuen.

DarkSouL1221 · 23. September 2014

Hi Leute ich habe auch ein kleines Problem mit meinem Dropdownmenü.

HTML

<dir class="loginsys">
    <ul class="navi_main">
        <li class="toplogin">Anmelden
            <ul>
                <li class="sublogin">Name/Email</li>
                <li class="sublogin">Passwort</li>
                <li class="sublogin">Register</li>
            </ul>
        </li>
    </ul>
</dir>

Alles anzeigen

CSS

ul{
    list-style: none;
}
ul.navi_main{
    text-align: left;
    font-family: Comic;
    font-weight: bold;
    font-size: 17px;
    color: white;
}
ul.navi_main a{
    text-decoration: none;
    color: black;
}
ul.navi_main a:hover{
    text-decoration: none;
    color: white;
}
ul.navi_main li{
    float: left;
    position: relative;
}
ul.navi_main li.toplogin:hover{
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #DCDCDC;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadows: 2px 2px 5px #000000;
}




ul.navi_main li.toplogin{
    width: 150px;
    padding-top: 5px;
    padding-bottom: 5px;
}
ul.navi_main li ul.sublogin{
    background-color: #DCDCDC;
    position: absolute;
    left: 0;
    top: 30px;
    width: 115px;
    padding: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
ul.navi_main li ul li{
    float: left;
    text-align: left;
    display: block;
    color: black;
    padding: 5px;
}
ul.navi_mainli li ul li:hover{
    float: none;
    text-align: left;
    display: block;
    color: #DCDCDC;
    background-color: #DCDCDC;
    padding: 5px;
}
ul.navi_main li>ul{
    display: none;
}
ul.navi_main li:hover>ul{
    display: block;
}

Alles anzeigen

So das Menü an sich klappt super aber die Wörter Name/Email, Passwort und Register sind nicht linksbünding... selbst mit float left bekomme ich es nicht hin
Woran kann das liegen?

Problem: Dropdown-Menu gestalten

Jetzt mitmachen!

Teilen