HTML and CSS Reference
In-Depth Information
Figure 11-20.
The submenus now have their own colors
This exercise demonstrates the power of Css selectors. The HTml markup contains only one iD for the
top-level unordered list. There are no classes. All the styling is achieved through descendant selectors,
child selectors, and pseudo-classes. This means you can edit the menu items, and the correct styles will be
applied automatically without the need for extra markup.
■
The menu items are floated. Don't forget to use the
clear
property on the first element after the menu to
prevent it from moving up alongside.
Tip
Assessing the Accessibility of CSS Drop-down Menus
CSS drop-down menus work very well in modern browsers—at least if you're navigating with a mouse. What
most online tutorials forget to mention is that pure CSS menus aren't always ideal from the point of view of
accessibility. On Android touch screens, tapping a menu item takes you directly to the link's destination without
opening a submenu. On iOS, tapping a menu item once opens a submenu, if one exists. To get to the link's
destination, you need to tap a menu item twice.
This type of menu also presents problems for keyboard navigation. The preceding exercise sets the
display
property of submenus to
none
. This was done deliberately to prevent the links being accessed by anyone using
a keyboard to navigate. If you hide the submenus offscreen by giving them a large negative offset—as in the
tooltip examples earlier in this chapter—the links remain in the browser's tab order. So, someone using keyboard
navigation would continue tabbing through the submenus without seeing the links. Although it's possible to use
the
:focus
pseudo-class to display a submenu when tabbing to a top level link, there's currently no way to match
the parent of an element with a CSS selector. As a result, the submenu disappears as soon as you tab into it. This
makes the menu virtually unusable for anyone relying on keyboard navigation. Consequently, it's better to hide
the submenu links entirely.
■
The draft Css4 selectors module—yes, it already exists—proposes a method of selecting a parent element.
However, the syntax is subject to change.
Tip
