snav-expandable-sub-menu.html | Explore in Territory

<!doctype html>
<style>
  nav {
    background: lightyellow
  }
  .nav-main-item {
    display: inline-block;
    margin: 20px 20px;
    position: relative;
  }
  .nav-main-item:focus .submenu-column {
    display: inline;
  }
  .nav-main-item:focus-within .submenu-column {
    display: inline;
  }
  .nav-main-item:hover .submenu-column {
    display: inline;
  }
  .submenu-column {
    display: inline-block;
    position: absolute;
    top: 30px;
    left: 0;
    width: 250px;
    display: none;
    background: lightcyan;
  }
  .submenu-column li {
    margin: 20px 0;
  }
 #underlying {
    width: 200px;
    display: inline-block;
    background: pink;
  }
</style>

<header id="main-header" class="header-main">
  <nav role="navigation">
    <ul>
      <li class="nav-main-item" tabindex="0" id="menu_item">
        Technologies
        <div class="submenu-column">
          <ul>
            <li><a href="" id="sub_a">HTML</a></li>
            <li><a href="" id="sub_b">CSS</a></li>
            <li><a href="" id="sub_c">JavaScript</a></li>
            <li><a href="">Graphics</a></li>
            <li><a href="">HTTP</a></li>
            <li><a href="">APIs / DOM</a></li>
            <li><a href="">Browser Extensions</a></li>
            <li><a href="">MathML</a></li>
          </ul>
        </div>
      </li>
      <li class="nav-main-item" tabindex="0">
        References & Guides
        <div class="submenu-column">
          <ul>
            <li><a href="">Learn web development</a></li>
            <li><a href="">Tutorials</a></li>
            <li><a href="">References</a></li>
            <li><a href="">Developer Guides</a></li>
            <li><a href="">Accessibility</a></li>
            <li><a href="">Game development</a></li>
            <li><a href="">...more docs</a></li>
          </ul>
        </div>
      </li>
      <li class="nav-main-item" tabindex="0">
        Feedback
        <div class="submenu-column">
          <ul>
            <li>
              <a href="">Get Firefox help</a>
            </li>
            <li>
              <a href="">Get web development help</a>
            </li>
          </ul>
          <ul>
            <li>
              <a href="">Join the MDN community</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

<a href="" id="underlying">Some underlying focusable</a>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "sub_a"],
    ["Down", "sub_b"],
    ["Down", "sub_c"],
  ];
  menu_item.focus();
  snav.assertFocusMoves(resultMap);
</script>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-expandable-sub-menu.html
