纯css的导航下拉菜单

<style>
.Nav {

}
.Nav li{
  float:left;
  display:block;
  position:relative;
}
.Nav a{
  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 a {
  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='#'>产品
  <table><tr><td>
    <a href='#1'>内容管理系统</a>
    <a href='#2'>竞争情报系统</a>
  </td></tr></table>
  </a>
</li>
<li>
  <a href='#'>客户服务
  <table><tr><td>
    <a href='#1'>技术支持</a>
    <a href='#2'>留言反馈</a>
    <a href='#3'>在线帮助</a>
  </td></tr></table>
  </a>
</li>
</div>