（导航布局图片）
我有选项卡和子选项卡的导航布局，我想通过文本阅读器/lynx 访问它们。它由主页"Startseite"，"Über"，"Interessant"，"Orte"以及子页面"Linköping"，"München"和"Baustelle"组成。因此，逻辑结构为：
- 斯蒂特
- Über
- Interessant
- 林雪平
- 慕尼黑
- 鲍斯特尔
- 奥尔特
但是由于我使用了几个div 标签的布局，它只会在 lynx 中产生这个：
斯蒂特
Über
Interessant
林雪平
慕尼黑
鲍斯特尔
奥尔特
现在的问题（或我还不知道如何实施的解决方案）是：
（1） 如何改进我的布局，使其可以通过文本阅读器/LYNX
访问 ...或
（2）如何调整无序列表和子列表的布局（请参阅代码）也看起来像我当前的选项卡式导航布局？
<nav>
<ul id="mainpages">
<li><a href="./">Startseite</a></li>
<li><a href="./">Über</a></li>
<li><a href="./">Interessant</a>
<ul id="sub1">
<li><a href="./">Linköping</a></li>
<li><a href="./">München</a></li>
<li><a href="./">Baustelle</a></li>
</ul>
</li>
<li><a href="./">Orte</a></li>
</ul>
</nav>
请记住，我的主要任务是使其文本阅读器/山猫可访问。我虽然使用这样的布局，因为它很容易用 #some_ul_id {display： inline-block} 设置样式：
<nav>
<ul id="mainpages">
<li><a href="./">Startseite</a></li>
<li><a href="./">Über</a></li>
<li><a href="./">Interessant</a></li>
<li><a href="./">Orte</a></li>
</ul>
<ul id="sub1">
<li><a href="./">Linköping</a></li>
<li><a href="./">München</a></li>
<li><a href="./">Baustelle</a></li>
</ul>
</nav>
我的第三个问题是：
（3）这是良好做法吗？我应该这样做吗？
这是最简单的方法，尽管解决方案（2）会更好，因为它更合乎逻辑。
从可访问性的角度来看，标记解决方案以使其在语义上表示您要实现的目标的方法是使用 WAI-ARIA menubar、menu和各种menuitem角色。还应使用 aria-haspopup="true" 属性显示子菜单，并使用 aria-expanded 属性跟踪菜单展开的时间。为了实现层次结构的语义标记，您需要具有分层列表，因为这是以可理解的方式表示层次结构的最简单方法。
这是指向完整动态 ARIA 菜单示例的链接 http://dylanb.github.io/bower_components/a11yfy/examples/menu.html
您需要确保每个菜单项都可以使用锚标记上的 href 属性进行键盘聚焦，只要您查找"click"事件并且不要对鼠标按下/鼠标向上等做任何时髦的事情，就会为您执行此操作。
实现此目的的一种方法是绝对定位子菜单 - 当然，这需要您事先知道将有足够的空间，以便项目不会超过多行（或者，您手头有通过媒体查询的较小屏幕的替代方案）。
因此，您将外部ul（或nav本身）放置在relative，然后在主菜单项上方的:hover上，使子ul可见，该子菜单绝对以这样的方式定位，即它位于主菜单项行下方 - 如下所示：http://jsfiddle.net/0rpyLqtn/
其他细微的变化很容易想象;如果你不希望在主菜单项的单行下方有"空白"，你可以给ul一个border-bottom而不是一个margin-bottom，并让它的边框颜色始终可见，就像这样：http://jsfiddle.net/0rpyLqtn/1/
由于您考虑了辅助功能，因此您可能还需要注意这种菜单在没有"鼠标"作为输入设备的设备上的行为方式。通过键盘访问这样的菜单可能很棘手，而在触摸屏上，基于:hover的菜单也可能效果不佳。无论如何，这些问题已经在网上讨论过了，所以通过一些研究，你也应该能够找到这些问题的解决方案/解决方法。