純CSS導覽功能表(簡潔版)

<!--此特效來源來互連網,由 Yagebu.com 收集整理-->
<!---->
<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>