マウス オーバーまたはキーボード フォーカスのいずれかに表示される CSS ドロップ ダウンがあります。ドロップ ダウンはマウスでアクセスできますが、キーボードでアクセスしようとすると、ドロップ ダウンが消えます (ただし、アイテムは循環します)。 .
キーボードでドロップダウン メニュー項目にアクセスするときに、ドロップダウンを表示し続ける方法についてアイデアをお持ちの方はいますか? CSSコードは以下です。
http://testingtesting1.info/joomla-test/でデモにアクセスできます。
HTML コードは Joomla によって生成されます。
/* Parent menu items */
.h-nav {
width:720px;
height:90px;
}
.h-nav ul {
left:0;
}
.h-nav li {
display:block;
list-style:none;
position:relative;
float:left;
margin-right:10px;
}
.h-nav a {
display:block;
padding:33px 24px;
margin:0;
float:left;
}
.h-nav li a:hover,
.h-nav li a:focus {
background-color:#ffbb58;
}
.h-nav li.parent {
background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
text-align:left;
}
.h-nav li li a:hover,
.h-nav li li a:focus {
text-decoration:underline;
background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
margin:4px auto;
position:absolute;
margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
text-align:left;
padding:10px 5px;
width:220px;
background:url("../../images/standard/bg-submenu.png") repeat;
z-index:9999;
/*rounded corners - rounding only bottom corners */
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
-moz-border-bottom-right-radius:10px 10px;
-webkit-border-bottom-left-radius:10px 10px;
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
margin:auto;
top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
display:block;
padding:2px 25px;
}