Dropdown Menü Layoutproblem
Hallo liebe Community,
nachdem ich durch Eure Hilfe rausgekriegt habe, was falsch lief damit mir mein Dropdown überhaupt angezeigt wird haben sich jetzt neue Fragen bzw. Probleme ergeben. Da ich das auf meiner produktiven Website so nicht stehen lassen kann, habe ich eine andere selten besuchte Seite als Testseite eingesetzt und mit dem selben CSS versehen.
Meine Fragen:
1. Wie kriege ich die Dropdowns linksbündig unter den übergeordneten Menüpunkt (Mitglieder)?
2. Wie beseitige ich die Transparenz in der Schrift der Menüpunkte (der 2. Menüpunkt im Dropdown ist schlecht lesbar?
3. Was fehlt, damit ich das Dropdown auch wirklich benutzen kann? Momentan blendet es aus sobald ich mit der Mouse da hin will.
Sind es Fehler im Quellcode oder möglicherweise Einstellungsprobleme? Ich habe diverse CSS Seiten im Netz angesurft, bin aber zu keiner Lösung gekommen.
Danke und viele Grüße
Dirk
Website: http://www.artabana-igel.de
CSS Code
.mod_navigation.mainmenu {
width:800px;
height:28px;
left:0;
top:145px;
position:absolute;
overflow:visible;
float:none;
display:block;
margin-right:auto;
vertical-align:middle;
text-align:center;
white-space:normal;
background-color:#4D4F54;
font:10px sans-serif;
color:#FFF;
}
.mod_navigation.mainmenu ul {
margin-top:0;
padding-top:0;
}
.mod_navigation.mainmenu ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.mod_navigation.mainmenu ul li {
float:left;
list-style-type:none;
}
.mod_navigation.mainmenu ul li a {
text-decoration: none;
display: block;
}
.mod_navigation.mainmenu ul li:hover > ul {
visibility: visible;
}
.mod_navigation.mainmenu ul li ul {
display: inline;
position: absolute;
padding:0px;
visibility: hidden;
}
.mod_navigation.mainmenu ul li ul li {
float: none;
}
.mod_navigation.mainmenu ul li ul li a:hover {
background-color:#930;
}
.mod_navigation.mainmenu a {
display:block;
padding-right:10px;
padding-left:10px;
vertical-align:middle;
text-align:center;
white-space:nowrap;
background-color:#4D4F54;
border-right:2px solid #FFF;
font:12px/30px sans-serif,Verdana,Arial,Helvetica;
font-weight:bold;
text-decoration:none;
color:#FFF;
list-style-type:none;
}
.mod_navigation.mainmenu a:hover {
background-color:#930;
text-decoration:none;
}
.mod_navigation.mainmenu .active {
display:block;
padding-right:10px;
padding-left:10px;
vertical-align:middle;
text-align:center;
background-color:#FFF;
border-right:2px solid #FFF;
font:12px/30px sans-serif,Verdana,Arial,Helvetica;
font-weight:bold;
text-decoration:none;
color:#4D4F54;
list-style-type:none;
}
Danke, Problem ist gelöst
Hallo Socke,
danke für Deinen prima Tipp.
Jetzt funzt es vollständig. Hab das Theme gleich auf meine produktive Seite portiert und funktioniert astrein. Und es ist absolut schlüssig. Leider bin ich über andere Beispiele nicht an diese letzten paar Kleinigkeiten rangekommen. Aber jetzt ist es endlich gelöst.
Liebe Grüße
Dirk
Hallo Karl,
danke für Deinen Tipp, allerdings findet man auf der Demo-Seite leider keine CSS Texte (außer mit Firebug) und ich hatte ja schon eine Menüleiste die mir optisch gut gefiel. Da ich nicht unbedingt der HTML/CSS-Profi bin, war es ein Trial and Error versuchen und ich glaube erst jetzt so langsam verstanden zu haben wie das mit ul li ul a ... usw. schlüssig zu handhaben ist.
Liebe Grüße
Dirk
