网站主页中经常需要设计下拉菜单，当鼠标移动到某个菜单上时会弹出下拉子菜单列表，每个子菜单项可以链接到不同的页面，当鼠标离开菜单列表时，子菜单项会被隐藏掉。下面就通过指令来设计这样的下拉菜单效果。
【例5.24】设计下拉菜单（源代码\ch05\5.24.html）。
下拉菜单 body { width: 600px; } a { text-decoration: none; display: block; color: #fff; width: 120px; height: 40px; line-height: 40px; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #5D478B; } li { list-style-type: none; } #app > li { list-style-type: none; float: left; text-align: center; position: relative; } #app li a:hover { color: #fff; background: #FF8C69; } #app li ul { position: absolute; left: -40px; top: 40px; margin-top: 1px; font-size: 12px; } \[v-cloak\] { display: none; }在浏览器中运行程序，当鼠标放置在“经典图书”菜单项目时，结果如图5-34所示。
图5-34 下拉菜单效果