Creating a drop-down menu

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.
<li id="servicesPageLink">
<a href="#">Services</a>
<ul>
<li><a href="#">Drop-down link one</a></li>
<li><a href="#">Drop-down link two</a></li>
<li><a href="#">Drop-down link three</a></li>
<li><a href="#">Drop-down link four</a></li>
</ul>
</li>

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

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. Upon doing so, the list item’s descendant list’s
display value is set to block, and it’s displayed directly underneath the parent
item.
#navigation li:hover ul {
display: block;
left: 0;
}

3. Style nested list items and links. Add the following rule to replace the default
background for list items with one specifically for the drop-down menus. The
border-bottom value visually separates each of the list items.
#navigation li li {
background: url(drop-down-menu-background.gif) repeat-y;
border-bottom: 1px solid #ad3514;
}
Next, add the following rule to style nested list item links, overriding the
text-transform and padding values of top-level list items.
#navigation li li a:link, #navigation li li a:visited {
text-transform: none;
padding-left: 10px;
}

4. The final step is to override the hover and active states. For this example, the
background value for top-level lists is overridden and the background image
removed (meaning the hover state for nested list links has no unique background).
To make the hover state stand out, the links are given a vibrant left border. This
also moves the text inward by the width of the border.
#navigation li li a:hover, #navigation li li a:active {
background: none;
border-left: 5px solid #f7bc1d;
}

These property values are common to both states, apart from the border color
(orange for the hover state and red for the active state, roughly matching the colors
applied to the top-level tab icons in the same states, although the orange is
brighter for the drop-downs so that they stand out more); therefore, add the following
rule to change only the left border’s color on the active state:
#navigation li li a:active {
border-left-color: #ed1c24;
}