Dropdown Menü klappt nicht aus

[Waegi]

Hallo,

ich bin aktuell dabei ein Theme für Wordpress fertig zu machen, dazu würde ich gerne ein Dropdownmenü einbauen. Mit Wordpress kann ich die Punkte ja einfach so schieben wie ich sie brauch, jetzt muss ich das alles nur noch über CSS realisiert bekommen. Das ausblenden der Punkte klappt schonmal, jedoch werden sie beim hover nicht eingeblendet, hier mal der Link zur Website:


Und hier der Code für die Navigation:

#navi{font-weight:300; float:right; font-size:1.3em;}
#navi ul{list-style:none; padding-right:7%;}
#navi ul li{display:inline-block; padding:19px 0px;}
#navi ul li a{padding:19px 10px; position:relative;}
#navi ul li a:hover{background:#1C327F; color:#acd305;}
#navi ul li.current_page_item a{background:#1C327F; color:#acd305;}
.sub-menu{visibility:hidden; position:absolute; top:130px;}
#navi ul li a:hover ul{visibility:visible;}

Ich hoffe mir kann hier jemand helfen.

Gruß Waegi

 

[cebito]

Das a schließt keine Liste ein, sondern der Listenpunkt, also musst du den :hover des Listenpunktes ansprechen:

#navi ul li:hover ul{}

btw. verbirgst du das Untermenü, indem du es mit der Klasse ansprichst, was spezieller als ul ist, um sicherzugehen, das es nicht irgendwo Probleme gibt, solltest du es auch mit der Klasse ansprechen, wenn du es sichtbar machen willst:

#navi ul li:hover ul.sub-menu{}

 

[Waegi]

Hab das jetzt so angepasst, leider noch kein Unterschied:

#navi{font-weight:300; float:right; font-size:1.3em;}
#navi ul{list-style:none; padding-right:7%;}
#navi ul li{display:inline-block; padding:19px 0px;}
#navi ul li a{padding:19px 10px; position:relative;}
#navi ul li a:hover{background:#1C327F; color:#acd305;}
#navi ul li.current_page_item a{background:#1C327F; color:#acd305;}
.sub-menu{visibility:hidden; position:absolute; top:130px;}
#navi ul li:hover ul..sub-menu{visibility:visible;}

 

[cebito]

ul..submenu, da ist wohl einer zuviel. btw. kann man da auch zweimal drüber schauen bevor man fragt...

... und ein Blick in die Fehlerkonsole deines Browsers sollte dich auch darauf hinweisen

 

[Waegi]

Dankeschön, ja das nächste mal schau ich nochmal.

 

[marcmaroc]

Als ich jetzt geguckt habe klapp das Menü auf, jedoch ist es hinter der Sidebar und lässt sich sehr schlecht auswählen. Vielleicht musst Du mit Z-index arbeiten?

 

[cebito]

Als ich jetzt geguckt habe klapp das Menü auf, jedoch ist es hinter der Sidebar und lässt sich sehr schlecht auswählen. Vielleicht musst Du mit Z-index arbeiten?

Jepp, sollte er. Heut morgen hing es höher, da wars noch zu sehn

 

[Waegi]

Ja weiß ich, danke, ich hatte danach nur nicht mehr die Zeit das zu machen, ich werd das für die Seite in nächster Zeit noch fertigstellen, war grundlegend erstmal als Test dafür, wie es funktioniert und wie ich es in Zukunft bei Seiten auch umsetzen kann.

 

[Waegi]

So, also nochmal danke für die Hilfe gestern, ich komme hier nochmals mit einem neuen Problem und zwar möchte ich jetzt, dass wenn ich über einen Menüpunkt gehe, also beim hover, dass der blaue Hintergrund über die komplette breite von dem grünen Background geht und nicht bei jedem Elemten individuell breit ist.
Ich hab bereits versucht dem a-Element oder dem li Elemente oder beiden gleichzeitig eine feste Breite zu geben, was jedoch nicht funktioniert hat.

Ebenfalls wäre noch interessant, falls das keine wordpress-spezifische Frage ist, wie ich es hinbekomme, dass die Unterpunkte beim Menü nicht auch als active hinterlegt werden, sondern nur, wenn diese speziell angewählt wurden.

Danke schonmal für die Hilfe.
Gruß Waegi

 

[Waegi]

Kann mir hierzu niemand helfen?

Danke und Grüße
Waegi