纯Css实现下拉菜单的简单例子

大家可能会经常用到hover这属性，用hover实现鼠标经过的颜色改变等等之类，其实hover非常强大。

分享一个鼠标经过，弹出下拉菜单的小技巧；

当我们建好一个列表：

• 
  
• javascript:;” target=”_blank” title=””>一级菜单
• 
  
• 一级菜单
  
  • 
    
  • 二级菜单
  • 
    
  • 二级菜单
  • 
    
  
  
• 
  
• 一级菜单
• 
  
• 一级菜单

我们在一级菜单下再建立一个ul列表，并将这个列表显示隐藏：

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

注意这个时候需要用定位去放置二级菜单的位置；

然后：

.slideWrap：hover slide{display：block；}  /**鼠标经过 将slide元素 显示**/

slide跟在hover后面，注意必须是在子元素，鼠标经过父元素才能实现这个效果。

怎么样？这个小技巧很简单和实用吧！