NAVIGATION STRATEGIES - HTML5 - page 151

you can style the font family with good results, but other styling is unpredictable between
dif erent browsers.

Figure 8-3: Displaying menu choices with the <select> tag.

If the categories appear a bit shallow, you can add greater detail in an outline format using the
<optgroup> tag. With each tag, a new subgroup is added. You can nest them in several
levels if you wish. h e following listing ( Optgroup.html in this chapter's folder at www.
wiley.com/go/smashinghtml5 ) shows how the optgroup element is used in conjunc-
tion with the <select> and <option> tags.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
select {
background - color : #F2EFBD;
color : #657BA6;
font - family : Verdana , Geneva , sans - serif ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Stratified Drop - Down Menu </ title >
</ head >
< nav >
< label for = ”animals” > Animals </ label >
< select id = ”animals” name = ”global1” >
< optgroup label = ”Dogs” >
< option value = ”hounds” > Hounds </ option >
< option value = ”work” > Work </ option >
< option value = ”terrier” > Terriers </ option >
</ optgroup >
< optgroup label = ”Horses” >
< option value = ”race” > Race </ option >
< option value = ”work” > Work </ option >
< option value = ”show” > Show </ option >
</ optgroup >
< optgroup label = ”Rabbits” >
< option value = ”pets” > Pets </ option >

155