HTML/CSS：焦點選擇器和Tab鍵在Firefox/Windows 7中不起作用

Question

我想創建一個只有最初隱藏的HTML和CSS的下拉菜單，然後在用戶使用鼠標懸停後出現在屏幕上或標籤到鏈接上。

懸停方面工作正常，但我似乎無法讓我的菜單隻使用鍵盤或Tab鍵正常工作。

下面是摘錄：

#menu {display: none;} 
 

 
a:focus + #menu {display: block;}

<a href="#menu">Drop Down Menu</a> 
 

 

 
<div id="menu"> 
 
<ul> 
 
<li><a href="#">Test Link 1</a></li> 
 
<li><a href="#">Test Link 2</a></li> 
 
<li><a href="#">Test Link 3</a></li> 
 
<li><a href="#">Test Link 4</a></li> 
 
</ul> 
 
</div>

tab鍵切換到「下拉菜單」鏈接並顯示被隱藏的鏈接，但我不能標籤到子鏈接，一旦他們上露面屏幕。我嘗試將tabindex =「0」屬性添加到所有div，ul和li元素，但似乎也無法解決問題。

我是新來的網頁設計，也許我失去了一些東西。任何建議，將不勝感激。

Answer 1

我相信你會遇到這個問題，因爲當你使用display: none元素時，它實質上是從用戶的角度將它從頁面中移除，並且DOM仍然記住那些元素即使在動態變化後仍不屬於頁面的一部分將它們添加回來。此外，有些人會說使用display: none這樣的負面影響可訪問性： https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

下面是一些JavaScript，讓你你正在尋找與您的特定代碼的效果：你的回答

<style> 

.hide { 
    position: absolute !important; 
    top: -9999px !important; 
    left: -9999px !important; 
} 

</style> 

<a href="#menu">Drop Down Menu</a> 


<div id="menu"> 
    <ul> 
    <li><a href="#">Test Link 1</a></li> 
    <li><a href="#">Test Link 2</a></li> 
    <li><a href="#">Test Link 3</a></li> 
    <li><a href="#">Test Link 4</a></li> 
    </ul> 
</div> 

<script> 
    (function() { 
    var menu = document.getElementById('menu'); 

    //convert list of a elements into an array 
    var anchor = Array.prototype.slice.call(document.getElementsByTagName('a')); 

    menu.classList.add('hide'); 

    //loop through a elements, removing hide class from #menu on focus 
    anchor.forEach(function(c) { 
     c.addEventListener('focus', function() { 
     menu.classList.remove('hide'); 
     }); 
     c.addEventListener('blur', function() { 
     menu.classList.add('hide'); 
     }); 
    }); 
    })(); 
</script>