On 26/04/2011 5:17 AM, Sandy wrote:
hey all,
If this looks familiar it's because I changed the subject. I didn't get
any replies to my last email, subject line "sub menus show up on hover
but not on focus" and I'm stumped. I hope someone out there can help!
I am working on a test page that has a sub menu which displays on hover
but not on focus. How do I get the sub menus (for example the 3 links
under "location") to show up when someone tabs to the link the way they
do when someone hovers over it?
http://sandyfeldman.com/villab/en/index.shtml
http://sandyfeldman.com/villab/css_js/villab.css
http://sandyfeldman.com/villab/css_js/TJK_keyBoardDropDown.js
The styles I am using more or less came from
http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
The sub-menu only show in full when you have JS enabled. It's a attempt
at making a menu keyboard friendly. I did similar with this demo [1],
which is another solution and someone else added to that with another
demo [2].
but I seem to have lost a key ingredient when I put this to work in my
page. Any thoughts about how to fix this up?
Thanks!
Sandy
Change this CSS,
#menu li:hover ul, #menu li:focus ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
to this (<li> can not gain focus).
#menu li:hover ul, #menu li a:focus+ul, #menu li:active ul, #menu
li.msieFix ul {
display : block;
z-index : 10;
}
As with my menu, Opera shows the best accessibility.
[1] http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
[2] http://www.adipalaz.com/accessible_ddmenu.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
