无法使用键盘标签

Question

我有一个导航栏 - 但是当我用键盘选中它时，只有前5个项目得到了关注

这就是现在的情况：

标签没有打开整个菜单 我需要以某种方式找到一种方法，使一切都集中在键盘TAB上 （所有李） 我添加了完整的导航构建和完整的CSS设计 我不使用Java Script。

我为残障人士建立这个网站。

＆＃13;

＆＃13;

/*this design for navigation bar*/

.nav {
  flex-wrap: wrap;
  margin-right: 70px;
  list-style: none;
  margin-top: -66px;
  padding-right: 205px !important;
}

#top ul {
  list-style: none;
}

#top ul li {
  display: inline-block;
  float: right;
}

#top ul li a {
  display: block;
  background-color: #363636;
  color: #71DBEB;
  width: 137px;
  height: 58px;
  padding-top: 18px;
  text-decoration: none;
  text-align: center;
  padding-right: 3px;
  margin-top: -3px;
}

#top ul li a:hover {
  text-decoration: underline overline;
}

#top ul li ul {
  display: none;
  position: absolute;
  margin-right: -40px;
  margin-top: 3px;
}

#top ul li:hover>ul {
  display: block;
  width: 120px;
}

#top ul li ul li ul {
  display: none;
  position: absolute;
}

#top ul li ul li:hover>ul {
  display: block;
  width: 120px;
  margin-right: 170px;
  margin-top: -40px;
}

#verySubNav {
  margin-right: 97px !important;
  margin-top: -55px !important;
}

#top ul li .active-page {
  text-decoration: underline overline;
  font-weight: bold;
}

＆＃13;

<nav id="top">
  <ul class="nav">
    <li class="nav-item">
      <a href="index.html">דף הבית</a>
    </li>
    <li class="nav-item">
      <a class="notPage" href="#">מהי אנימה?</a>
      <ul class="sub-menu">
        <li><a href="history.html">הסטוריה</a></li>
        <li><a href="MessageAndPrinciple.html">מסרים וערכים</a></li>
        <li><a class="notActiveTopNav" href="#">מאפייני האנימה</a></li>

      </ul>
    </li>
    <li class="nav-item">
      <a class="notPage" href="#">סדרות מומלצות</a>
      <ul class="sub-menu">
        <li>
          <a href="ActionGenre.html">אקשן</a>
          <ul id="verySubNav">
            <li><a href="NarutoPage.html">נארוטו</a></li>
            <li><a class="notActiveTopNav" href="#">פרי טייל</a></li>
            <li><a class="notActiveTopNav" href="#">מתקפת הטיטאנים</a></li>
            <li><a class="notActiveTopNav" href="#">דרגון בול</a></li>
          </ul>
        </li>
        <li><a class="notActiveTopNav" href="#">רומנטיקה</a>
          <ul id="verySubNav">
            <li><a class="notActiveTopNav" href="#">להחסיר פעימה</a></li>
            <li><a class="notActiveTopNav" href="#">סיפור האהבה שלי</a></li>
            <li><a class="notActiveTopNav" href="#">ימי בית ספר</a></li>
            <li><a class="notActiveTopNav" href="#">אנג'ליק</a></li>
          </ul>
        </li>
        <li>
          <a class="notActiveTopNav" href="#">אימה</a>
          <ul id="verySubNav">
            <li><a class="notActiveTopNav" href="#">מחברת המוות</a></li>
            <li><a class="notActiveTopNav" href="#">קוד גיאז</a></li>
            <li><a class="notActiveTopNav" href="#">טוקיו גול</a></li>
            <li><a class="notActiveTopNav" href="#">פסיכו'פס</a></li>
          </ul>
        </li>
        <li>
          <a class="notActiveTopNav" href="#">הרפתקאות</a>
          <ul id="verySubNav">
            <li><a class="notActiveTopNav" href="#">אין משחק אין חיים</a></li>
            <li><a class="notActiveTopNav" href="#">וואן פיס</a></li>
            <li><a class="notActiveTopNav" href="#">טריגאן</a></li>
            <li><a class="notActiveTopNav" href="#">ויולט אברגארדן</a></li>
          </ul>
        </li>
        <li>
          <a class="notActiveTopNav" href="#">מדע בדיוני</a>
          <ul id="verySubNav">
            <li><a class="notActiveTopNav" href="#">אוונגליון</a></li>
            <li><a class="notActiveTopNav" href="#">כהה יותר משחור</a></li>
            <li><a class="notActiveTopNav" href="#">כתר אשם</a></li>
            <li><a class="notActiveTopNav" href="#">הרוח במעטפת</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="notPage" href="#">מילון מושגים</a>
      <ul class="sub-menu">
        <li><a class="active-page" href="Dictionary.html">מושגים בסיסיים</a></li>
        <li><a class="notActiveTopNav" href="#">ז'אנרים מיוחדים</a></li>
        <li><a class="notActiveTopNav" href="#">פירוש הבעות פנים</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="notActiveTopNav" id="forumFix" href="#">פורום</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我发现的最佳答案是将其添加到HTML之后使用此JS代码  

这不是完美的-也许有人可以对此进行一些更正-但这适用于TAB和屏幕阅读器

function tab_nav() {
    var navA = document.querySelectorAll("ul li>a");
    var navInner = document.querySelectorAll("li ul li>a");

    for (var i = 0, len = navA.length; i < len; i++) {
        navA[i].addEventListener("focus", function (event) {
            var innerUl = event.target.parentElement.querySelector("ul")
            if (innerUl) innerUl.style.display = "block";
        }, true);
    }

    for (var i = 0, len = navInner.length; i < len; i++) {
        if (navInner[i].parentElement.nextElementSibling === null) {
            navInner[i].addEventListener("blur", function (event) {
                event.target.parentElement.parentElement.style.display = "none"
            }, true);
        }
    }
}