On Sun, Jan 9, 2011 at 2:09 PM, Goku San <gokus...@hotmail.com> wrote:
> I have the following navigational menu bar. The menu has multiple parent
> menu items.
[snip]
> What currently happens is when a user hovers over
> the Parent menu item, the child menu items appear below, horizontally, of
> course. And each time, the child menu items appear to the far left. So the
> problem is when we get to the 5th parent menu item, going across, hover over
> it, the child menu items appear below towards the far left. So it
> cosmetically looks wrong but also causes the user to further navigate their
> mouse to get to the child items. Anyway to position the child menu items to
> appear directly below the parents and not always to the far left?
Make the parents the containing blocks for the absolute positioning of
the children:
#nav .sub {
position: relative
}
http://reference.sitepoint.com/css/containingblock
I hope you'll ensure that users who are not using a mouse (e.g. people
with certain
motor disabilities) can still access the content linked in the child items,
whether via deeper links on hub pages reached via parent items or by ensuring
that child menus are focusable and visible on focus.
Food for thought:
http://www.w3.org/TR/WCAG20/#keyboard-operation
http://www.uie.com/articles/users_decide_first/
http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
http://labs.benjaminhawkeslewis.com/rapid-access-hover-menu.html
--
Benjamin Hawkes-Lewis
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
