Hallo,
ich bin neu hier und hoffe hier ein wenig Hilfe zu erhalten, bei meinem kleinen Problemchen.
Und zwar habe ich einen CSS Code geschrieben für ein Verticales Menü mit Untermenüs, die Untermenüs sollen bei MouseOver neben dem Link angezeigt werden. wie auf diesem Bild:
html-seminar.de/woltlab/attachment/997/
dieses bild ist vom Internetexplorrer und genauso wie auf diesem Bild soll es auch in Google Chrome angezeigt werden aber im Chrome sieht das dann so aus:
html-seminar.de/woltlab/attachment/998/
Code ist natürlich der selbe, ich hoffe hier findet sich einer, der sich damit auskennt.
Das Problem liegt bei dem "display:inline-block;" in dem Teil wo ich die Links Formatiere, da musste ich ein Block element daraus machen um die Breite des Links verändern zu können, damit dann bei MouseOver nicht nur der Text mit Hintergrund versehen wird sondern in der gesamten breite, da ich finde, dass es einfach besser aussieht, allerdings scheint Google Chrome damit nicht klarzukommen, denn nehme ich das inline-block raus funktioniert es mit der ausrichtung so wie ich es möchte nur stimmt dann natürlich die Linkformatierung nicht ich hoffe ihr versteht was ich meine.
Hier jetzt mal mein Code:
ul.Menu{ display:inline-block; padding:0; margin:0; float:left; position:absolute; width:240; height:auto; background-color:#363736; border-radius:7px; border-style:solid; border-width:3; border-color:#FFF; box-shadow:5px 5px 5px black;}
li { list-style-type:none; padding:10;}
.Menu > li > .submenu1{ display:none; padding:0; position:absolute; width:240; background-color:#363736; border-radius:7px; border-style:solid; border-width:3; border-color:#FFF; box-shadow:5px 5px 5px black;}
.aLink1:hover ul { display:inline;}
.submenu1 > li > .submenu2 { display:none; padding:0; position:absolute; width:240; background-color:#363736; border-radius:7px; border-style:solid; border-width:3; border-color:#FFF; box-shadow:5px 5px 5px black;}
.aLink2:hover ul { display:inline;}
.abutton { /*margin:0 auto;*/ color:#FFF; font-family:Arial; font-size:20px; font-weight:bold; text-decoration:none; padding-top:8; padding-bottom:8; display:inline-block; width:100%;}
.abutton:hover { -moz-box-shadow: 0px 1px 0px 0px #fff6af; -webkit-box-shadow: 0px 1px 0px 0px #fff6af; box-shadow: 0px 1px 0px 0px #fff6af; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); background-color:#ffec64; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; border:1px solid #ffaa22; cursor:pointer; color:#333333; font-family:Arial; font-size:20px; font-weight:bold; /*padding:6px 24px;*/ text-decoration:none; text-shadow:0px 1px 0px #ffee66;}/*.abutton:active { position:relative; top:1px;}*/
Alles anzeigen
Ich hoffe hier kann mir geholfen werden.
LG