純Css實現下拉式功能表的簡單例子

大家可能會經常用到hover這屬性，用hover實現滑鼠經過的顏色改變等等之類，其實hover非常強大。

分享一個滑鼠經過，彈出下拉式功能表的小技巧；

當我們建好一個列表：

<ul>
<li class=”home”><a href=”javascript:;” target=”_blank” title=””>一級菜單</a></li>
<li class=”slideWrap”>一級菜單
<ul class=”slide”>
<li><a href=”#” target=”_blank” title=””>二級菜單</a></li>
<li><a href=”#” target=”_blank” title=””>二級菜單</a></li>
</ul>
</li>
<li><a href=”javascript:;” target=”_blank” title=””>一級菜單</a></li>
<li><a href=”javascript:;” target=”_blank” title=””>一級菜單</a></li>

</ul>

我們在一級菜單下再建立一個ul列表，並將這個列表顯示隱藏：

.slideWrap .slide {position: absolute; display: none;}

注意這個時候需要用定位去放置二級菜單的位置；

然後：

.slideWrap：hover slide{display：block；}  /**滑鼠經過 將slide元素 顯示**/

slide跟在hover後面，注意必須是在子項目，滑鼠經過父元素才能實現這個效果。

怎麼樣？這個小技巧很簡單和實用吧！