Pure CSS navigation menu (Simplified Version)

<! -- This special effect is from the Internet and collected by yagebu.com -->
<! ---->
<Style>
. Nav {

}
. Nav Li {
Float: left;
Display: block;
Position: relative;
}
. Nav {
Float: left;
Display: block;
Position: relative;
Padding: 2px 10px 2px 10px;
Font-size: 13px;
Text-Decoration: none;
}
. Nav Li A: hover
{
Color: # ffffff;
Background: # ea0000;
}
. Nav Li table {
Display: none;
Border-collapse: collapse;
}
. Nav Li: hover table,. Nav A: hover table {
Display: block;
Position: absolute;
Top: 18px;
Left: 0;
Background: # ea0000;
}
. Nav Li: hover Table A,. Nav A: hover Table {
Float: none;
Background: # f2f2f2;
Color: #000;
Width: 120px;
Border-bottom: 1px solid # FFF;
}
. Nav Li: hover Table A: hover,. Nav A: hover Table A: hover {
Background: #565656;
Color: # FFF;
}
</Style>

<Div class = 'nav'>
<Li>
<A href = '#'> product
<Table> <tr> <TD>
<A href = '# 1'> Content Management System </a>
<A href = '# 2'> Competitive Intelligence System </a>
</TD> </tr> </table>
</A>
</LI>
<Li>
<A href = '#'> Customer Service
<Table> <tr> <TD>
<A href = '# 1'> technical support </a>
<A href = '# 2'> message feedback </a>
<A href = '# 3'> online help </a>
</TD> </tr> </table>
</A>
</LI>
</Div>