Css code
<Style type = "text/css">
Ul {
Font-family: Arial, Helvetica, sans-serif;
Background: # ccc;
Background:-webkit-gradient (linear, left top, left bottom, from (# fff), to (# e9e9e9 ));
Background:-moz-linear-gradient (top, # fff, # e9e9e9 );
Display: block;
Clear: left;
Float: left;
Padding: 0 15px;
Margin: 0 0 10px 0;
-Webkit-box-shadow: 0 0 2 PX #333;
-Moz-box-shadow: 0 0 2px #333;
Box-shadow: 0 0 2pixels #333;
Border: 1px solid # fff;
-Webkit-border-radius: 3px;
-Moz-border-radius: 3px;
Border-radius: 3px;
}
Ul li {
Margin: 0;
Float: left;
Display: block;
List-style: none;
}
Ul li {
Padding: 10px;
Display: block;
Color: #666;
Text-decoration: none;
Text-shadow: 1px 1px 1px # fff;
}
Ul li a: hover {
Color: #000;
}
Ul li ul {
Margin: 0 0 0-15px;
Display: none;
-Webkit-border-top-right-radius: 0;
-Webkit-border-top-left-radius: 0;
-Moz-border-topleft-radius: 0;
-Moz-border-topright-radius: 0;
Border-top-left-radius: 0;
Border-top-right-radius: 0;
}
Ul li: hover ul {
Display: block;
Position: absolute;
}
Ul li {
Clear: left;
}
. Red,. red li ul {
Background: # e01111;
Background:-webkit-gradient (linear, left top, left bottom, from (# e01111), to (# 901d1d ));
Background:-moz-linear-gradient (top, # e01111, # 901d1d );
Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# e01111', endColorstr =' # 901d1d ');
}
. Red {
Color: # fff;
Text-shadow: 0-1px 1px # 770d0d;
}
. Red a: hover {
Color: # fff;
}
</Style>
Html code
<Ul class = "red">
<Li> <a href = "#"> Nav Item </a>
<Ul>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Nav Item </a>
<Ul>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Nav Item </a>
<Ul>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
<Li> <a href = "#"> Sub Item </a> </li>
</Ul>
</Li>
</Ul>
The preview effect is as follows: