本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.10节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在全新的HTML 5中，除了常用的内容交互元素外，使用较为频繁的还有菜单交互元素，此功能主要采用< menu >与< command >两个元素实现。本实例的目的是演示< menu >标记元素的基本用法。< menu >是HTML 5中的标记，此元素其实在HTML 2时就已经存在，但是在HTML 4被抛弃。现在在HTML 5中重新恢复使用，并且为其赋予了全新的功能。该元素常与< li >列表元素结合使用，用来定义一个列表式的菜单。< menu >的属性信息如表1-1所示。
本实例的功能是在页面中通过< menu >元素列表显示3行图文并茂的文本选项。首先添加了一个< menu >元素，在该元素中加入< li >列表元素；然后，在列表元素中分别放置一个< img >与< span >元素，用于展示图片与标题；最后使用CSS样式代码，当用户将鼠标光标移至某个< li >元素时，展示菜单中某选项被选中的效果。
具体实现
使用Dreamweaver创建一个名为“010.html”的文件，具体代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>使用<menu>元素</title> <style type="text/css"> body{ padding:5px; font-size:12px } menu{ padding:0; margin:0; display:block; border: solid 1px #365167; width:222px } menu li{ list-style-type:none; padding:5px; margin:5px; height:28px; width:200px } menu li:hover{ border: solid 1px #7DA2CE; background-color:#CFE3FD } menu li img{ clear:both; float:left; padding-right:8px; margin-top:-2px } menu li span{ padding-top:5px; float:left; font-size:13px } </style> </head> <body> <menu> <li> <img src="1.png"></img> <span>Firefox</span> </li> <li> <img src="2.png"></img> <span>Chrome</span> </li> <li> <img src="3.png"></img> <span>Safari</span> </li> </menu> </body> </html>当使用< menu >定义菜单列表时，通常使用< menu >元素来定义菜单的框架，框架中的内容使用< li >元素来进行构造，以形成列表形状，如页面中加粗代码所示。另外，为了美化列表选项的展示效果，需要使用CSS样式来修饰，例如，样式代码中的加粗部分，表示通过CSS样式控制鼠标光标在移出与移入元素时的不同展示效果。注意菜单还可以嵌套在别的菜单中，形成带层次的菜单结构。
执行后的效果如图1-19所示。
https://yqfile.alicdn.com/f8e24f0124666140f7819e525d1d0bf680032efb.png" >