1. Edit the web page. For any link you want to have a drop-down menu spawn from,
nest an unordered list in its parent list item, as per the example in the following
code block.
Services
2. Create the drop-downs. Test your page now, and it will look odd because nested list
items pick up the styles for the standard list items. To start dealing with this, add
position: relative; to the #navigation li rule, which will enable nested
absolute-positioned elements to take their top and left values from their containers
Creating a drop-down menu
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
224
rather than the page as a whole. Then, after the existing rules in the CSS, add the
#navigation li ul rule shown in the following code block. By setting position to
absolute and left to a large negative value, the nested lists (i.e., the drop-down
menus) are placed offscreen by default, but are still accessible to screen readers.
Adding the top border helps visually separate the nested list from its parent button.
#navigation li ul {
border-top: 1px solid #ad3514;
width: 185px;
position: absolute;
left: -10000px
}
Next, add the following rule to bring the nested lists back when you hover the
cursor over the parent list item.
Pages:
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321