相關：《jQuery 鼠標觸發下拉菜單》

昨天寫了一個新的CSS，如圖所示，使用純CSS實現，我個人不是很擅長JS，所以純CSS也是不得已。

HTML代碼：

<span class="cai">商品互踩群
      <div class="qun">
       <ul>
        <li>群1：2851618834<i>(滿)</i></li>
        <li>群1：2851618834</li>
        <li>群1：2851618834</li>
       </ul>
      </div>
     </span>

CSS：

.topr .cai{display:inline-block;
 padding-left: 4px; padding-right: 4px;
 line-height: 30px;
 height: 30px;
 border-left: 1px solid #ededed; border-right: 1px solid #ededed;border-bottom: 1px solid #FFF;/*默認下白邊*/
 position: relative;
 margin-bottom: -1px;
 background-color: #FFF;/*默認開啟背景色*/
}
.topr .cai .qun{display: block; /*默認下拉*/
 position: absolute;
 right: -1px;
 width: 160px;
 border: 1px solid #ededed;
 background-color: #FFF;
 z-index: -1;
 height: 80px;
}
.qun ul{list-style: none;position: absolute; top: 8px; left: 6px;}
.qun ul li{line-height: 22px; background: url(../images/qq.png) no-repeat left; text-align: left; padding-left: 22px;}
.qun ul li i{ color: #e53433;font-style:normal;}
.topr .cai:hover{background-color: #FFF;height: 69px;border-left: 1px solid #ededed; border-right: 1px solid #ededed; border-bottom: 1px solid #FFF;}
.topr .cai:hover .qun{display: block;}/*鼠標觸發下拉*/

以上CSS為下拉區域使用了display: block;固定顯示了，沒有進行隱藏，所以默認為下拉狀態顯示。

提醒：使用z-index: -1;時請注意，一不小心就無法點擊下拉區域了。