Javascript tabindex focus使用CSS调用子菜单

我正在构建一个垂直导航，它位于页面左侧。 导航通过悬停调用子菜单。 但这里的问题是我想建立这个导航可以是通过选项卡响应

我遇到的情况是，当我将鼠标悬停在导航栏上时，子菜单将轻松进入。但我想用Tab来集中精力在主菜单上，然后子菜单也会很轻松。但它不起作用

可以用HTML和CSS完成吗

例如：

这是我的HTML代码：

                <nav id="menu"> 
                <ul class="parent-menu">   
                <li >
                <a href="#" tabindex="1" >Home & Kitchen</a>
                <ul> 
                <li><a href="#" tabindex="2">item</a></li>
                <li><a href="#" tabindex="3">item</a></li> 
                <li><a href="#" tabindex="4">item</a></li> 
                <li><a href="#" tabindex="5">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li tabindex="2">
                <a href="#" >Electronics</a> 
                <ul> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li tabindex="3">
                <a href="#" >Clothing</a>
                <ul> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li> 
                </ul>
                </li> 

                <li>
                <a href="#">Cars & Motorbikes</a> 
                <ul> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                <li><a href="#">item</a></li> 
                </ul> 
                </li> 

                <li>
                <a href="#">Books</a> 
                <ul> 
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                </ul> 
                </li>

                <li>
                <a href="#">Support</a> 
                <ul> 
                <li>
                <a href="#">Contact Us</a>
                </li> 
                <li><a href="#">Forum</a>
                </li> 
                <li><a href="#">Deliveries</a></li>
                <li><a href="#">T&C</a></li> 
                </ul>
                </li> 
        </ul> 
    </nav>

这就是我发现棘手的地方。这里的悬停效果很好。但说到专注，这是行不通的

#menu ul li:hover  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in; 
} 
#menu ul li:focus  > ul { 
left: 200px; 
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in; 
} 

---

希望你们能理解我的意思：）

不使用tabindex，您可以使用以下内容：

#menu ul li a:focus + ul {
 left: 200px; 
 -webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
 -ms-transition: left 200ms ease-in;
 transition: left 200ms ease-in; 
}

（查克这把小提琴）

或从a中删除href，使用href的原因是它关注而不是

---

检查一下这把小提琴

非常感谢~很抱歉回复太晚。但这里的问题是，当我使用Tab时，子菜单跳出，但当我点击第二次时。我认为主菜单失去了焦点，所以当焦点不在主菜单栏时，子菜单栏会放松。如何设置子菜单停止跳回？不明白你的意思，请澄清这句话“子菜单跳出，但当我第二次点击时。”第二次点击什么？你能说得更具体一点吗？您好，您可以从原始代码中看到。我想在使用tab键调用第一级菜单（家庭和厨房级）时构建导航，然后当我再次按下tab键时，我的注意力将集中在第二级菜单上，即这些项目。然后我可以使用enter进入我想要的页面。但在你给我的演示中，当焦点跳到第二级菜单，在那里你可以清楚地看到边框的变化，那么菜单就会放松，因为第一级菜单失去了焦点，这意味着不再轻松有效。我希望你能理解我写的东西。对不起，我的英语我想你希望子菜单是可见的，但是点击了它的任何一个项目？但是，如果页面切换到单击子菜单项，为什么要这样做？无论如何，如果你想让css不影响父母对孩子的关注，你可以使用jQuery。

#menu ul li a:focus + ul {
 left: 200px; 
 -webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
 -ms-transition: left 200ms ease-in;
 transition: left 200ms ease-in; 
}