CSS3 子菜单未显示在焦点上

Question

我能够在焦点上显示第一个子菜单，但第二个子菜单不显示。我尝试将 css 属性设置为 display: block，也尝试更改位置，但我显然错过了一些东西。

这是作为一个 Sass 项目开始的，我可以通过删除 CSS 中的许多冗余ul li ul li来更轻松地找到问题，但我仍然遇到同样的问题。

我已经发布了一个jsfiddle设置，其中包含我正在使用的CSS和HTML。任何帮助解决第二个子菜单将不胜感激。

http://jsfiddle.net/nulimitz/uxfposgc/

.HTML：

<nav class="nav-main">
 <div class="logo">Website</div>
 <div class="mobile-nav">
  <i class="fa fa-bars"></i>
 </div>
 <ul>
  <li class="dropdown">
   <a href="#" class="nav-item">Link</a>
   <ul class="dropdown-menu">
    <li><a href="#" class="nav-item">Link</a></li>
    <li><a href="#" class="nav-item">Link</a></li>
    <li class="dropdown"><a href="#" class="nav-item">Link</a>
     <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li class="dropdown">
   <a href="#" class="nav-item">Link</a>
   <ul class="dropdown-menu">
    <li><a href="#" class="nav-item">Link</a></li>
    <li><a href="#" class="nav-item">Link</a></li>
    <li><a href="#" class="nav-item">Link</a></li>
   </ul>
  </li>
  <li class="dropdown">
   <a href="#" class="nav-item">Link</a>
   <ul class="dropdown-menu">
    <li><a href="#" class="nav-item">Link</a></li>
    <li><a href="#" class="nav-item">Link</a></li>
    <li><a href="#" class="nav-item">Link</a></li>
   </ul>
  </li>
 </ul>
</nav>

.CSS：

.nav-main {
    width: 100%;
    background-color: #222;
    height: 70px;
    color: #fff;
}
.nav-main .logo {
    float: left;
    height: 40px;
    padding: 15px 30px;
    font-size: 1.4em;
    line-height: 40px;
}
.nav-main > ul {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.nav-main > ul > li {
    float: left;
}
.nav-main > ul > li > a {
    display: inline-block;
    padding: 15px 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}
.nav-main > ul > li > a:hover {
    background-color: #444;
}
.nav-main > ul > li > a:focus {
    background-color: #444;
}
.nav-main > ul > li > a:focus ~ ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all, 25ms, ease-in-out;
    -moz-transition: all, 25ms, ease-in-out;
    -ms-transition: all, 25ms, ease-in-out;
    -o-transition: all, 25ms, ease-in-out;
    transition: all, 25ms, ease-in-out;
}
.nav-main > ul > li > ul {
    position: absolute;
    top: 70px;
    padding: 20px;
    overflow: hidden;
    background-color: #222;
    margin: 0;
    visibility: hidden;
    list-style-type: none;
}
.nav-main > ul > li > ul > li > a {
    padding: 15px 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}
.nav-main > ul > li > ul > li > a:hover {
    background-color: #444;
}
.nav-main > ul > li > ul > li > a:focus {
    background-color: #444;
}
.nav-main > ul > li > ul > li > a:focus ~ ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all, 25ms, ease-in-out;
    -moz-transition: all, 25ms, ease-in-out;
    -ms-transition: all, 25ms, ease-in-out;
    -o-transition: all, 25ms, ease-in-out;
    transition: all, 25ms, ease-in-out;
}
.nav-main > ul > li > ul > li > ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding: 20px;
    overflow: hidden;
    background-color: #222;
    margin: 0;
    visibility: hidden;
    list-style-type: none;
}
.nav-main > ul > li > ul > li > ul > li > a {
    padding: 15px 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}
.nav-main > ul > li > ul > li > ul > li > a:hover {
    background-color: #444;
}

Answer 1

你的代码很好。它适用于手动对焦，但锚点元素对焦点没有反应。

将 tabindex 添加到代码中。

<a tabindex="1"></a>
<a tabindex="2"></a>

这将使锚点元素响应焦点。

所以你的代码将是：

<ul>
 <li>
  <a tabindex="1"></a>
 </li>
 <li>
  <a tabindex="2"></a>
 </li>
  ...and so on
</ul>

编辑：您甚至可以通过更改 tabindex 的顺序来更改焦点到锚元素的顺序。

例如：

<a tabindex="2"></a>
<a tabindex="1"></a>

这样，第二个锚点元素将首先聚焦于按 Tab，然后是第一个锚点元素。

Answer 2

实际上你在这里有 3 个问题：

1）

你不能有第二个下拉列表：focus，因为你一次只关注1个项目，所以当你聚焦第二个（点击）时，你将失去第一个焦点，一切都会关闭。此外，溢出：隐藏将隐藏此第二级ul。

2）是这个的可访问性，您将在使用选项卡键盘导航时遇到问题。

3）你对每个元素都有特定的类，使用它并在你的css中重用，以获得最佳性能建议。

要存档它，我建议您使用 js（或 jquery）或将鼠标悬停在 LI 元素中，或多或少像这样：

.nav-main .dropdown:hover > .dropdown-menu,
.nav-main .dropdown a:focus + .dropdown-menu{
    visibility: visible;
    opacity: 1;
    -webkit-transition: all, 25ms, ease-in-out;
    -moz-transition: all, 25ms, ease-in-out;
    -ms-transition: all, 25ms, ease-in-out;
    -o-transition: all, 25ms, ease-in-out;
    transition: all, 25ms, ease-in-out;
}

http://jsfiddle.net/uxfposgc/3/

另请查看此问题 没有Javascript的可访问HTML5/CSS3下拉菜单