Dropdown Hovereffekt

sofixleon · 27. Mai 2014

Hallo zusammen,

habe ein ein Dropdown Menü in meinem Board. Dort möchte ich den Hovereffekt ändern sodas dieser über die ganze Breite geht.
Hier mal den CSS Code den ich verwende.

CSS

.mainMenu ul ul:before {
  position: absolute;
  content:"";
  width: 0;
  height: 0;
  top: -15px;
  left: 20px;
}


.mainMenu ul li:hover .invisible{
  display: block;
  position: absolute;
  margin-top: 37px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: rgb (176, 213, 251, .9) !important;
  background-image: linear-gradient rgb (176, 213, 251, .9), rgb (185, 219, 252, .9) !important;
  text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8);	
  z-index: 9000;
  height: auto;
  width: auto;
  padding: 6px;
}


.invisible a:hover {
  background: none repeat scroll 0 0 rgb (240, 247, 253, .9);
  text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.8);
}

Alles anzeigen

Anbei noch ein Screen was ich meine.

Danke für eure Hilfe.

sofixleon · 4. Juli 2014

Hat hier eventuell jemand schon eine Lösung für mich?

Cr@@gle · 4. Juli 2014

Holla,

CSS

.mainMenu {
   div.invisible {
      padding: 0px;
      min-width: 150px;
      > ul > li > a {
         float: none;
         display: block;
         height: auto;
         padding: 8px 10px;
      }
   }
}

Alles anzeigen

Mfg Cr@@gle

sofixleon · 4. Juli 2014

Nein hat leider keinerlei Auswirkungen.

Geht um dieses Tutorial http://wbbsupport.de/index.php/Thread/172-CSS-Dropdown/

Shit als Gast sieht man das nicht mehr.

Cr@@gle · 4. Juli 2014

Also dieser Code hat definitiv Auswirkung - habe ihn ja selber probiert

sofixleon · 5. Juli 2014

Hmm eigenartig, bei gehts überhaupt nicht. Hier nochmal mein aktueller Code den ich benutze.

CSS

/* ================================================================ DropDown Menu Fix  */
.mainMenu ul ul:before {
  position: absolute;
  content:"";
  width: 0;
  height: 0;
  top: -15px;
  left: 20px;
}
.mainMenu ul li:hover .invisible {
  display: block;
  position: absolute;
  margin-top: 37px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: rgba(195, 223, 247, 0.8);
  z-index: 9000;
  height: auto;
  width: auto;
  padding: 6px;
}
.invisible a:hover {
  color: rgb (0, 140, 191);
  transition: all 250ms ease 0s;
}
.navigationHeader .navigationMenuItems{
  display: none;
}

Alles anzeigen

Cr@@gle · 5. Juli 2014

Du fügst den Code aber eh in den Stil-Editor ein und nicht in irgendeine .css-Datei... (Code ist LESS-Format!!)?

Und dein Code selber interessiert mich nicht - mein Code muss ergänzend eingefügt werden. Habe den Code direkt in deinem Forum zusammengesetzt und da funktioniert er wunderbar. Also kann es nur an einer falschen Integration liegen.

sofixleon · 5. Juli 2014

Hmm dann versteh ich es auch nicht. Habe deinen Code zu meinem in Individuelles CSS und LESS hinzugefügt und trotzdem ist der gewünschte Effekt den ich erzielen möchte nicht vorhanden siehe Screen.

Getestet mit aktuellem Firefox und Chrome

Warlord · 5. Juli 2014

zumal das am Ende wohl auch "Scheiße" aussehen wird.... stelle mir das gerade auf einem 24 er vor eine quasi leere Zeile über den ganzen Monitor....das nenn ich dann super Design

Cr@@gle · 5. Juli 2014

Ist der Code aktuell im Stil drinnen?

Denn ich finde ihn nirgends im aktuellen Standard-Stil deiner Seite

Dropdown Hovereffekt

cls-design

Informationen

Demoinstallationen

Hilfe