虽然标题这样写，但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单，我原来也没有用过，经他一提醒觉得还是挺有用处的，尤其在有很多内容的页面上。
废话最后再说，直接给出代码先：
JavaScript
<script type="text/javascript">
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
在页面中使用
<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
<!-- 当鼠标悬停在这里时显示下面列表的内容 -->
<ul id="menuLists" style="display:none;">
<!-- 这里是鼠标悬停时显示的内容 -->
<li>菜单列表内容</li>
<li>菜单列表内容</li>
<li>菜单列表内容</li>
</ul>
</div>
<!-- 当鼠标悬停在这里时显示下面列表的内容 -->
<ul id="menuLists" style="display:none;">
<!-- 这里是鼠标悬停时显示的内容 -->
<li>菜单列表内容</li>
<li>菜单列表内容</li>
<li>菜单列表内容</li>
</ul>
</div>
原理
页面调用之初，只有 menuCaption 即菜单的标题显示，menuLists 这些菜单列表的内容不显示；但当鼠标进入菜单标题区域后，会激活 popMenu 函数把 menuLists 的样式从“display:none”改为“display:block”，这样 menuLists 的内容就显示出来了；鼠标离开菜单标题区域后再次隐藏列表内容。
SEO 方面的疑问
由于页面的代码中有“display:none”，相当于存在隐藏文字，我不敢确定 Google 对这类隐藏文字的态度，所以各位要使用的时候请务必小心，做好可能会被 Google 降权的心理准备。
