似乎無法獲得下拉鍊接以顯示(聚焦)時使用鍵盤進行切換。嘗試了幾種不同的風格,但沒有運氣。任何幫助,將不勝感激。下拉菜單鏈接顯示在焦點上
body {
\t background: #005bbb;
\t 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;
\t display: inline;
\t position: relative;
\t margin: 0;
\t width: 235px}
\t
.nav-global ul li:hover {
\t background-color: #003e51;}
\t
/* style the first level slightly different */
.nav-global > ul > li {
\t margin: 0;
\t width: auto;
\t background: #fff;
\t color: #005bbb}
.nav-global ul li a {
\t color: #005bbb;
\t padding: 12px 16px 14px 16px;
\t display: block;
\t font: 15px Sofia Bold, "Trebuchet MS", sans-serif;}
\t
.nav-global ul li a:hover {
\t color: #fff}
\t
.nav-global > ul > li > a {}
.nav-global li:hover > a {color: #fff} \t
\t
\t \t
/* ----------------------------------------------- secondary nav ----------------------------------------------- */
.nav-global ul li ul {
\t position: absolute;
\t max-height: 0;
\t overflow: hidden;
\t margin: 0;
\t opacity: 0;}
.nav-global ul li:hover > ul {
\t max-height: 1000px;
\t overflow: visible;
\t opacity: 1;}
\t
.nav-global ul li ul li {
\t background-color: #003e51;}
\t
.nav-global ul li ul li a {
\t color: #fff;
\t font: 13px Sofia, "Trebuchet MS", sans-serif;
\t padding: 0;
\t line-height: 30px;
\t text-indent: 15px;}
.nav-global ul li ul li a:hover {
\t background: #002935;}
.nav-global ul li ul li:first-child {
\t padding-top: 10px}
.nav-global ul li ul li:last-child {
\t padding-bottom: 10px}
.
<div class="nav-main">
<nav class="nav-global">
<ul>
\t <li><a href="/findmaterials" class="find">Find Materials</a>
\t
<ul>
\t \t <li><a href="/findmaterials/everything">Everything</a></li>
\t \t \t <li><a href="http://catalog.lib.buffalo.edu/">Catalog</a></li>
\t \t \t <li><a href="/findmaterials/databases">Databases</a></li>
\t \t \t <li><a href="/findmaterials/ebooks">E-Books</a></li>
\t \t \t <li><a href="http://ll3md4hy6n.search.serialssolutions.com">E-Journals</a></li>
\t \t \t <li><a href="/reserve">Course Reserve</a></li>
\t \t \t <li><a href="/off-campus">Off Campus Access</a></li>
\t </ul>
</li>
</ul>
</nav>
</div>
=
我試着用這樣的代碼爲 「焦點」,但不工作:
.nav-global ul li:focus > ul {
max-height: 1000px;
overflow: visible;
opacity: 1;}
請嘗試創建一個[最小的,完整的和可驗證的示例](https://stackoverflow.com/help/mcve)。簡單地鏈接到您的網站是不夠的。 – jfeferman
這不是我的網站。只是導航本身。沒有其他的。 – closeyetfar
瞭解,但您仍然應該能夠生成一個最簡單的示例並提供代碼,以便其他人可以幫助您。 – jfeferman