是否可以仅使用[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

如果您希望子菜单项具有焦点时可以看到完整的子菜单，我看不到没有Javascript的方法。 如果它足够你，如果只有焦点元素可见，你可以尝试这样的事情：

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

如果还没有通过以下方式将焦点元素移回原来的位置：hover-pseudo-class。

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

Answer 2

可以 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/