Drop Down Menu: focus Problem

enoo · #1 (**permalink**) 20.03.2007, 16:00

Hallo,

ich habe schon die Suche und die FAQ benutzt, komme aber trotzdem nicht weiter...

Folgendes Menü

Code:

<ul id="menu">
      <li><a href="#">top1</a>
      <ul>
        <li><a href="#">sub1.1</a></li>
        <li><a href="#">sub1.2</a></li>
        <li><a href="#">sub1.3</a></li>
      </ul>
      </li>
      <li><a href="#">top2</a>
      <ul>
        <li><a href="#">sub2.1</a></li>
        <li><a href="#">sub2.2</a></li>
        <li><a href="#">sub2.3</a></li>
      </ul>
      </li>
      <li><a href="#">top3</a></li>
    </ul>

Meine CSS-Anweisungen

Code:

    #menu {
     float: left;
     margin-left: 100px;

    } 
    #menu li {
     float: left;
     position: relative;
     width: 100px;
    }
    #menu ul {
     display: none;
    }
    #menu li:hover ul, #menu li a:focus ul {
     display: block;
    }
    #menu li ul {
     position: absolute;
     width: 100px;
    }

Das Problem ist, dass beim Benutzen der Tabtaste nicht das Untermenü angezeigt wird.
#menu li a:focus ul sollte aber doch dazu führen.

PS: Mir geht's zunächst nur um den Firefox.

DANKE!

fricca · #2 (**permalink**) 20.03.2007, 17:21

Zitat:

Zitat von enoo

#menu li a:focus ul sollte aber doch dazu führen.

Nö. Das ul ist kein Nachfahre des a-Elements.

enoo · #3 (**permalink**) 20.03.2007, 18:13

Ok, aber #menu li:focus ul klappt auch nicht.

Wenn das falsch war, wie ist es denn richtig?

heiko_rs · #4 (**permalink**) 20.03.2007, 18:31

Der Fokus liegt auf a, nicht auf li - es gibt kein li:focus.

enoo · #5 (**permalink**) 20.03.2007, 18:35

Ja, du hast natürlich recht.

Ich komme aber im Moment nicht auf die Anweisung, die nun richtig ist.

#menu li:focus ul
#menu li a:focus ul

> Das ist also beides falsch. Wie ist die richtige Anweisung?

heiko_rs · #6 (**permalink**) 20.03.2007, 18:38

Es gibt keine. Mit a geht es nicht, da es keine Blockelemente enthalten darf, und mit li geht es nicht, da es keinen focus bekommt. Ausschließlich li:hover geht.

enoo · #7 (**permalink**) 20.03.2007, 18:45

Danke, das ist mal 'ne klare Aussage.

Wenn ich also ein barrierefreies Menü haben will, kann es kein Drop-Down Menü sein wegen 9.4 BITV

Zitat:

Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks-, Formularkontrollelementen und Objekten festzulegen.

Sehe ich das richtig?

fricca · #8 (**permalink**) 20.03.2007, 18:49

a:focus+ul
Aber das bringt auch keine wirkliche Lösung.

Wenn du eine tab-bare Dropdown-Navi willst, dann kommst du um JavaScript nicht herum - mit entsprechender Fallback-Lösung.
In den FAQ ist eine solche Navigation verlinkt.
Und: ja, ich würde -- wenn immer es geht -- auf Dropdown-Navigationen verzichten.

heiko_rs · #9 (**permalink**) 20.03.2007, 18:51

Ja - es geht allenfalls mit JS.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Css Menu Problem	Rapidement	CSS	11	16.06.2011 15:38
CSS Slide Down Menu	Serpico	CSS	4	27.04.2011 18:21
DHTML-Drop Down - Menü \|Drop Down erst bei Click	Scolex	CSS	1	22.02.2011 18:05
Brauch hilfe Drop Down oder Pull Down ?	nice-two	CSS	6	12.03.2010 15:15
Ultimate Drop Down Menu	Lestat	Ressourcen	7	03.08.2005 17:21