| <!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> |
