Sample code for creating a drop-down menu with pure CSS

<Style type = "text/css">
. Menu {
Font-family: verdana, sans-serif;
Width: 750px;
Position: relative;
Font-size: 0.85em;
Padding-bottom: 250px;
}
. Menu ul {
Padding: 0;
Margin: 0;
List-style-type: none;
}
. Menu ul li {
Float: left;
Position: relative;
}
. Menu ul li a,. menu ul li a: visited {
Display: block;
Text-decoration: none;
Color: #000;
Width: 139px;
Height: 3em;
Color: #000;
Border: 1px solid # fff;
Border-width: 1px 1px 0 0;
Background: # dfc184;
Padding-left: 10px;
Line-height: 3em;
}
* Html. menu ul li a,. menu ul li a: visited {
Width: 149px;
Width: 139px;
}
. Menu ul li ul {
Display: none;
}
Table {
Margin:-1px;
Border-collapse: collapse;
Font-size: 1em;
}
/* Specific to non IE browsers */
. Menu ul li: hover {
Color: # fff;
Background: # bd8d5e;
}
. Menu ul li: hover ul {
Display: block;
Position: absolute;
Top: 3em;
Margin-top: 1px;
Left: 0;
Width: 150px;
}
. Menu ul li: hover ul li ul {
Display: none;
}
. Menu ul li: hover ul li {
Display: block;
Background: # faeec7;
Color: #000;
Height: auto;
Line-height: 1.2em;
Padding: 5px 10px;
Width: 129px
}
. Menu ul li: hover ul li a. drop {
Background: # c9c9a7 url (.../graphics/drop.gif) bottom right no-repeat;
}
. Menu ul li: hover ul li a: hover {
Background: # c9c9a7;
Color: #000;
}
. Menu ul li: hover ul {
Display: block;
Position: absolute;
Left: 150px;
Top: 0;
Width: 150px;
}
. Menu ul li: hover ul. left {
Left:-150px;
}
</Style>
<! -- [If lte IE 6]>
<Style type = "text/css">
. Menu ul li a: hover {
Color: # fff;
Background: # bd8d5e;
}
. Menu ul li a: hover ul {

1st 2 3 4 5 6 pages