• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menü anpassen mit CSS - Finde richtigen Code nicht

soigroeg

Neues Mitglied
Hallo,

hier auf der Seite findet ihr mein Menü: Home

Ich möchte das Submenü aber so wie hier haben:
http://www.gundf.de

Also dass das Blaue beim Hover die gesamte Fläche des Buttons ausfüllt und nicht ein "margin" lässt.
Kann aber leider nicht finden, wo genau ich das in der CSS-Datei einstellen kann.

Kann da mal jemand drüber gucken?

gruß,
Georg
 
Hi, die Seiten haben bei mir eben auch lange geladen. Ich würde dir übrigens raten ein bisschen HTML und CSS zu lernen anstatt Code und Design von anderen Seiten zu kopieren.

Dein Menü ist mit Javascript umgesetzt, per javascript bekommt dein dropdown "ul" eine feste Breite, daher der Abstand. Ansonsten könntest du einfach den a Elementen im Dropdown ein Padding + höhe und Breite geben, dass es so aussieht wie gewünscht.

Also versuch das Menü richtig nachzubauen mit HTML und CSS nicht mit Javascript.
 
Die Seite ist mit einem CMS wie Joomla gemacht. Das "Navigations-Modul" sah vorher so aus wie hier:
Home, ich hab es mit css angepasst, so dass es aussieht wie auf der Seite im Link von meinem ersten post.

Jedenfalls füge ich dass hier in die CSS-File ein:

.a {
padding: 0px;
margin: 0px;
}


Keine Veränderung. Gibt es da noch einen anderen Tipp?
 
Hallo,

ein Dropdown-Menü kannst du auch ohne Javascript, nur mit CSS gestalten und dieses auch viel einfacher anpassen.

HTML:
<ul>
  <li>dies ist ein link</li>
  <li>dies ist noch ein link</li>
  <li>dies ist ein link mit untermenü
    <ul>
      <li>ich bin ein untermenü link</li>
      <li>ich bin auch ein untermenü link</li>
    </ul>
  </li>
  <li>dies ist noch ein weiterer link</li>
</ul>

im CSS-Teil würde es so aussehen

HTML:
ul li ul {
  display: none;
}

ul li:hover ul {
  display: block;
}

Bei dieser Methode wird zwar der Menüpunkt unterhalb dem Untermenü beim darüberfahren nach unten geschoben. Das lässt sich zwar beheben, aber hier ging es um das Dropdown-Menü in einer einfacheren Art und Weise. Mit position: absolute; kannst du dieses Problem beheben.


lascaux
 
Zurück
Oben