When hovering over the menu bar, the dropdown menus appear but I am unable to scroll down using the arrow keys. Clicking on a menu item also does not allow me to navigate through the menu with the arrow keys. It seems like this issue is related to the focus attribute.
CSS code:
.dropdown:hover > .dropdown-nav {
display: block;
visibility: visible;
color: white;
background-color: #5F5F5F;
font-size: 11.5px;
top: 30px;
scrollbar-base-color: #5F5F5F;
height: 180px;
overflow-x: no-display;
overflow-y: no-display;
}
#menu {
padding: 0;
z-index: 2;
background-color: #5F5F5F;
height: 60px;
position: fixed;
vertical-align: middle;
margin: 60px 0 0 0;
width: 92%;
margin-left: 4%;
margin-right: 4%;
float: left;
}
.menu-size {
font-size: 15px;
color: white;
text-align: left;
display: inline;
background-color: #5f5f5f;
height: 60px;
padding-bottom: 30px;
margin-bottom: -30px;
margin-top: 60px;
margin-left: 0px;
padding-top: 6px;
width: 100px;
}
HTML Code:
<div class="dropdown">
<a class="menu-size" href="#">home</a>
<ul class="dropdown-nav">
<li><a href="index.html">about us</a></li>
<li><a href="index.html">works published</a></li>
<li><a href="index.html#page3">best of the best</a></li>
<li><a href="index.html#page9">recommended links</a></li>
<li><a href="index.html#page9">books to research</a></li>
<li><a href="index.html#page10">links to research</a></li>
</ul>
</div>