下拉菜单链接显示在焦点上

Question

当使用键盘切换时，似乎无法显示（焦点）下拉链接。尝试了几种不同的风格，但没有运气。任何帮助将不胜感激。

body {
	  background: #005bbb;
	  font: 14px Sofia,Arial,sans-serif;
    color: #444;
    height: 100%;
    line-height: 1;}

.nav-global a {text-decoration: none}

.nav-global ul li {
    color: #005bbb;
    float: left; 
	display: inline; 
	position: relative; 
	margin: 0;
	width: 235px}
	
.nav-global ul li:hover {
	background-color: #003e51;}

	
/* style the first level slightly different */

.nav-global > ul > li {
	margin: 0;
	width: auto;
	background: #fff;
	color: #005bbb}

.nav-global ul li a {
	color: #005bbb;
	padding: 12px 16px 14px 16px;
	display: block; 
	font: 15px Sofia Bold, "Trebuchet MS", sans-serif;}
	
.nav-global ul li a:hover {
	color: #fff}
	
.nav-global > ul > li > a {}

.nav-global li:hover > a  {color: #fff}	
	
		
/* ----------------------------------------------- secondary nav ----------------------------------------------- */




.nav-global ul li ul {
	position: absolute;
	max-height: 0; 
	overflow: hidden; 
	margin: 0; 
	opacity: 0;}

.nav-global ul li:hover > ul {
	max-height: 1000px; 
	overflow: visible; 
	opacity: 1;}
	
.nav-global ul li ul li {
	background-color: #003e51;}
	
.nav-global ul li ul li a {
	color: #fff;
	font: 13px Sofia, "Trebuchet MS", sans-serif;
	padding: 0;
	line-height: 30px;
	text-indent: 15px;}


.nav-global ul li ul li a:hover {
	background: #002935;}

.nav-global ul li ul li:first-child {
	padding-top: 10px}

.nav-global ul li ul li:last-child {
	padding-bottom: 10px}
.

<div class="nav-main">
<nav class="nav-global">

    <ul>
	    <li><a href="/findmaterials" class="find">Find Materials</a>
    	
      <ul>
    		<li><a href="/findmaterials/everything">Everything</a></li>
			<li><a href="http://catalog.lib.buffalo.edu/">Catalog</a></li>
			<li><a href="/findmaterials/databases">Databases</a></li>
			<li><a href="/findmaterials/ebooks">E-Books</a></li>
			<li><a href="http://ll3md4hy6n.search.serialssolutions.com">E-Journals</a></li>
			<li><a href="/reserve">Course Reserve</a></li>
			<li><a href="/off-campus">Off Campus Access</a></li>
    	</ul>
    </li>
          </ul>
   
   
   
   </nav>
    </div>
 =

我尝试将这样的代码用于“聚焦”，但不起作用：

.nav-global ul li:focus > ul {
max-height: 1000px; 
overflow: visible; 
opacity: 1;}

Answer 1

将tabindex="0" 添加到nav-global，:focus 选择器将起作用。在下面的代码 sn-p 中，我应用了此更改并将所有子菜单链接添加到 tabindex 订单。参考this technique for WCAG 2.0。

请注意，一旦您使用 tab 键打开菜单，您的下一个选项卡将关闭菜单，因为 nav-global 失去焦点，如对您问题的评论所示。如果鼠标悬停在菜单上，它将保持打开状态，您可以键入 TAB 以查看tabindex 中的每个链接如何获得焦点。

我建议使用 javascript 控制菜单可见性，这样您就不必依赖 css 来维持其状态。 Js 可以让你更好地控制用户体验。例如，添加一个键处理程序以在键入 ESC 时关闭菜单。

代码如下：

body {
  background: #005bbb;
  font: 14px Sofia, Arial, sans-serif;
  color: #444;
  height: 100%;
  line-height: 1;
}

.nav-global a {
  text-decoration: none
}

.nav-global ul li {
  color: #005bbb;
  float: left;
  display: inline;
  position: relative;
  margin: 0;
  width: 235px
}

.nav-global ul li:hover {
  background-color: #003e51;
}


/* style the first level slightly different */

.nav-global>ul>li {
  margin: 0;
  width: auto;
  background: #fff;
  color: #005bbb
}

.nav-global ul li a {
  color: #005bbb;
  padding: 12px 16px 14px 16px;
  display: block;
  font: 15px Sofia Bold, "Trebuchet MS", sans-serif;
}

.nav-global ul li a:hover {
  color: #fff
}

.nav-global>ul>li>a {}

.nav-global li:hover>a {
  color: #fff
}


/* ----------------------------------------------- secondary nav ----------------------------------------------- */

.nav-global:focus>ul>li>ul {
  max-height: 1000px;
  overflow: visible;
  opacity: 1;
}

.nav-global>ul>li:focus>ul {
  max-height: 1000px;
  overflow: visible;
  opacity: 1;
}

.nav-global:focus>ul>li {
  background-color: #003e51;
}

.nav-global:focus>ul>li>a {
  color: white;
}

.nav-global ul li ul {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  opacity: 0;
}

.nav-global ul li:hover>ul {
  max-height: 1000px;
  overflow: visible;
  opacity: 1;
}

.nav-global ul li ul li {
  background-color: #003e51;
}

.nav-global ul li ul li a {
  color: #fff;
  font: 13px Sofia, "Trebuchet MS", sans-serif;
  padding: 0;
  line-height: 30px;
  text-indent: 15px;
}

.nav-global ul li ul li a:hover {
  background: #002935;
}

.nav-global ul li ul li:first-child {
  padding-top: 10px
}

.nav-global ul li ul li:last-child {
  padding-bottom: 10px
}

.

<div class="nav-main">
  <nav class="nav-global" tabindex="0">

    <ul>
      <li>
        <a href="/findmaterials" class="find" tabindex="-1">Find Materials</a>

        <ul>
          <li><a href="/findmaterials/everything" tabindex="0">Everything</a></li>
          <li><a href="http://catalog.lib.buffalo.edu/" tabindex="0">Catalog</a></li>
          <li><a href="/findmaterials/databases" tabindex="0">Databases</a></li>
          <li><a href="/findmaterials/ebooks" tabindex="0">E-Books</a></li>
          <li><a href="http://ll3md4hy6n.search.serialssolutions.com" tabindex="0">E-Journals</a></li>
          <li><a href="/reserve" tabindex="0">Course Reserve</a></li>
          <li><a href="/off-campus" tabindex="0">Off Campus Access</a></li>
        </ul>
      </li>
    </ul>



  </nav>
</div>