html - CSS3 子菜单未显示在焦点上

Question

我能够在焦点上显示第一个子菜单，但第二个子菜单不显示。我已经尝试将 css 属性设置为 display: block 并且还尝试更改定位，但我显然遗漏了一些东西。

这是作为一个 Sass 元素开始的，我可以通过删除 CSS 中的大量冗余 ul li ul li 来更容易地找到问题，但我仍然有同样的问题。

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

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

您的代码没问题。它适用于手动对焦，但 anchor 元素不会对焦点使用react。

将 tabindex 添加到您的代码中。

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

这将使 anchor 元素响应焦点。

所以你的代码是:

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

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

例如:

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

这样，第二个 anchor 元素将首先关注按 Tab，然后是第一个 anchor 元素。