CSS-Rahmen und die dynamische Pseudoklasse :hover

Question

Ich habe ein persistentes Dropline-Menü mit zwei Ebenen nur mit CSS erstellt. Es ist ziemlich Standard.

Es handelt sich um einen verschachtelten Satz von UL's und der UL's :hover state ist das, was die Untermenüebenen ein- und ausblendet.

Etwa so:

| *Pets* | Colors | Cars |
| Cats | Dogs | Birds| Goats | Sheep | 

| Pets | *Colors* | Cars |
| Red | Orange | Green | Blue| Yellow |

Ich habe dann einen 1px-Rahmen am unteren Rand des UL-Elements der ersten Ebene hinzugefügt. Etwa so:

| *Pets* | Colors | Cars |
--------------------------------------
| Cats | Dogs | Birds| Goats | Sheep | 

Wenn ich den Mauszeiger über ein Element der ersten Ebene (Haustiere) bewege und dann mit der Maus auf die zweite Ebene (Katzen) gehe, verschwindet die gesamte zweite Ebene.

Ich habe schließlich herausgefunden, dass der 1px-Rahmen des UL nicht im Hover-Bereich für das UL enthalten ist.

Kann ich eine Umrandung am unteren Rand einer Dropdown-Menüebene hinzufügen, ohne dass das Hovering des Menüs gestört wird?

Gracias.

Answer 1

Da Sie tatsächlich die :hover Zustand zum <li> s innerhalb der <ul> die Umrandung des Elternteils <ul> ist nicht in der :hover Bereich. Es würde Ihr Problem lösen, wenn Sie den Rahmen zu jedem <li> anstelle des übergeordneten <ul> . Vergewissern Sie sich, dass der linke und rechte Rand 0 beträgt. <li> s, und selbst wenn Sie das tun, müssen Sie möglicherweise noch einen negativen linken Rand oder eine linke Position hinzufügen, um Lücken im Rahmen zu beseitigen, sowie Überschreibungsstile für das Untermenü hinzufügen <li> s, wenn sie am Ende auch einen unteren Rand haben.

---

EDIT: Ok, ich habe eine Lösung, die hoffentlich für Sie funktionieren wird, mit dem folgenden HTML:

<ul>
    <li>Main1
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main2
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main3
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
    <li>Main4
      <ul><li>sub1</li><li>sub2</li><li>sub3</li></ul>
    </li>
</ul>

und dieses CSS:

ul { background:#ccc; border-bottom:5px solid #0c0; height:25px; }
ul li { cursor:pointer; display:inline-block; position:relative; height:30px; 
        zoom:1; _display:inline; }
ul li:hover ul { display:block; }
ul li ul { border:0 none; display:none; position:absolute; top:30px; }
ul li ul li { display:inline; padding:5px; }

Die wichtigsten Punkte sind hier:

• Höhe einstellen von ul kleiner sein als die Höhe der Haupt ul li um einen Betrag in Höhe des border-width
• Satz display:inline-block en li damit das Attribut Höhe wirksam wird
  • (Anmerkung: zoom:1; _display:inline; für IE6)
• Satz position:relative auf der Haupt ul li y position:absolute auf dem Unterelement 'ul li ul' mit 'top'-Wert der Höhe des Hauptelements 'ul li'

Getestet und funktionsfähig: http://jsfiddle.net/TKrSM/1/ (ggf. müssen Sie die Werte für die Höhe und den oberen Rand für die Polsterung in Ihrer Version anpassen)

Answer 2

Sie können einen Hintergrund verwenden und ihm unten eine 1px lange schwarze Linie geben, oder Sie können ein Element hinzufügen und es absolut mit einer Höhe von 1px und schwarzem Hintergrund positionieren. Ich würde mit dem Hintergrund Option gehen, weil es viel einfacher ist.