html - 是否可以仅使用 [Tab] 键选择子菜单？（仅限 CSS）

Question

是否可以仅使用 [Tab] 键在 ul/ol 样式的菜单中选择（激活）子菜单，以便子菜单可见？

我尝试使用 :focus 伪类

ul
    li
        a:focus
        +
        ul
            li
                a ...

并选择子菜单：

ul
    li
        a (?)
        +
        ul
            li
                a:focus ...

但我无法使用 CSS 选择活动节点

检查这个：http: //jsfiddle.net/iegik/DKvH2/

Answer 1

可能tabindex适合你。

HTML

<ul class="links">
        <li tabindex="1">
            <a href="#i1">Item 1</a>
        </li>
            <li tabindex="2">
            <a href="#i2">Item 2</a>
            <ul class="links">
                <li><a href="#i2-1">Item 2.1</a></li>
                <li><a href="#i2-1">Item 2.2</a></li>
            </ul>
        </li>
    </ul>

CSS

.links > li:focus a + ul{top:auto}

我已经创建了一个示例http://jsfiddle.net/DKvH2/3/

阅读此http://css-tricks.com/expanding-images-html5/

Answer 2

If you want the complete submenue to be visible when a submenue-item has focus, I don't see a way without Javascript. If it is enough for you, if just the focused element is visible, you could try something like this:

.links > li:not(:hover) li a:focus {
    left: 9999em;
    position: relative;
}

This would move the focused element back where it should be, if this didn't already happen via :hover-pseudo-class.

http://jsfiddle.net/DKvH2/1/