Creating a multicolumn drop-down menu in css

1. Edit the HTML to remove the existing nested lists. Then, for the multicolumn dropdown,
decide which link you want it to spawn from and place an unordered link in
its parent list item, with a single list item of its own. Within that list item, place the
unordered lists for the columns in the drop-down, one after the other. Note that if
some columns have fewer items, they must still have the same number of list items.
However, list items can be left empty, despite this technically being a presentational
hack. (Note that HTML Tidy might have problems with this and trim the empty list
items. If you use that tool, add a nonbreaking space as the list’s content.)
<li id="servicesPage">
<a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="#">Drop-down link 1.1</a></li>
<li><a href="#">Drop-down link 1.2</a></li>
<li><a href="#">Drop-down link 1.3</a></li>
<li><a href="#">Drop-down link 1.4</a></li>
</ul>
<ul>
<li><a href="#">Drop-down link 2.1</a></li>
<li><a href="#">Drop-down link 2.2</a></li>
USING LINKS AND CREATING NAVIGATION
227
5

<li></li>
<li></li>
</ul>
<ul>
<li><a href="#">Drop-down link 3.1</a></li>
<li><a href="#">Drop-down link 3.2</a></li>
<li><a href="#">Drop-down link 3.3</a></li>
<li></li>
</ul>
</li>
</ul>
</li>

2. Next, edit the nested list. The list that contains the three lists that form the
columns of the drop-down needs styling. Having larger borders on multicolumn
drop-downs is a good idea, because it enables users to focus on the contents more
easily, hence the amended border setting in the following code block. The other
change is to the width setting, which must be a multiple of three (here, it’s set to
465px, meaning that each column will be 155 pixels wide). With multicolumn dropdowns,
it’s best to avoid making each column the same width as a tab, otherwise
the result will look strange.
#navigation li ul {
border: 2px solid #ad3514;
width: 465px;
position: absolute;
left: -10000px
}

3. Now, the list item within the nested list needs amending. For the previous exercise,
the #navigation li li rule dealt with the list items in the drop-down, but here it’s
primarily for the container of the three columns. Therefore, the height and width
settings need to be set to auto to enable the list item to stretch to fit its nested
items. The background image is superfluous, so it’s replaced by a flat color, and the
border-bottom pair is removed—the borders will be moved to list items within
the columns.
#navigation li li {
background: #d27448;
height: auto;
width: auto;
}

4. The link rules should be styled next. Since the links are now one level deeper in the
list, instances of li li in the selectors are changed to li li li. In this example,
this change isn’t technically necessary, but it always pays to keep your selectors as
precise and accurate as possible. For the link and visited states, padding settings
for the top-level links are overridden, as are width and height settings. For the
other states, the border used for the hover and active effects is replaced by a
change in background color. Note that the rule that originally had both the hover
and active states in the selector (#navigation li li a:hover, #navigation li

li a:active) now only requires the hover state (#navigation li li li a:hover),
because the rules have nothing in common.
#navigation li li li a:link, #navigation li li li a:visited {
text-transform: none;
padding: 10px;
width: 135px;
height: auto;
}
#navigation li li li a:hover {
background: #ad3514;
}
#navigation li li li a:active {
background: #ed1c24;
}

5. Style the column list items. Add a rule to define a width and height for the column
list items, along with a bottom border. The last of those things makes it easier to
scan the rows within the list, while the width and height settings ensure that the
layout isn’t affected if the list items have no links within. (If the width and height
settings were omitted, the list items within the columns would show their bottom
borders only underneath their content’s width—and not at all if they were empty.)
The height setting is defined in ems rather than pixels, because this makes it possible
for the list items to stretch vertically if the web page’s text is resized.
#navigation li li li {
width: 155px;
height: 3em;
border-bottom: 1px solid #ad3514;
}

6. Finally, add a rule to float and define a width for the lists that comprise the containers
for the list items styled in the previous step.
#navigation ul ul ul {
border: 0;
width: 155px;
float: left;
position: relative;
}

**NOTE :Although the drop-down examples work in currently shipping browsers, neither works
as is in Internet Explorer 6, because that browser doesn’t enable you to do anything
with the hover state unless it’s on a link. To cater for that browser, JavaScript must be
used as a backup.