html鼠标滑过带音效,html5 + css3 带音效下拉菜单的实现

原文：scripts tutorials    (来自脚本教程网的教程，翻译可能有些不对。。。想要试试

音效下拉菜单

在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效果(菜单元素有整洁的悬浮特效)同时也使用了html5的Audio元素来添加菜单的音效，准备好了吗？那就开始吧。

Musical drop down menu

Our new tutorial tells about developing cool musical drop down menu (html5 + css3). This menu has css3 animation effects (neat hover effect to menu elements). We also used html5 Audio element in order to add music to this menu. If you are ready, lets start.

Final result | 最终效果

这儿是示例和下载包：|Here are samples and downloadable package:

Step 1. HTML

首先，我们应该准备菜单的HTML布局。每个菜单元素(实际上是一个无序的列表项)都要有描点(链接)，或者嵌套等级。

As the first, we should prepare HTML layout of our menu. Each menu element (which actually is a unordered list item) has anchor, or nested level.

• Menu element
  • Submenu element

  .....

Menu 4

.....

Step 2. CSS

这是菜单的css样式：|Here are the CSS styles of our menu:

#nav,#nav ul {

list-style: none outside none;

ma