前天写了一篇用css制作title和alt效果的文章，今天又看了看这篇文章，转念一想，既然可以做title等提示效果，那么是否可以用这个原理来制作一个二级菜单呢？如果可以的话，那么肯定要比用li来制作菜单更加简便和节省带宽，心动不如行动，可我改了好几次代码都没有成功。
HTML代码
下载: test_failed.html
- <style>
- .info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
- .info:hover {background:#eee;color:#333;}
- .info span {display: none }
- .info:hover span {display:block;position:absolute;top:25px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
- </style>
- <a href="http://www.achome.cn">http://www.achome.cn</a>
- <a href="#">55555555555555</a>
大家可以看到当鼠标悬停的时候会出现子菜单，但是当想把鼠标移向子菜单的时候，子菜单会突然消失。
后来我对比了一下用js和li写的二级菜单，渐渐明白了其中失败的原因。a的hover属性只能覆盖到当前a的范围，当父a的范围内又出现一个子a时，父a的hover属性将不能覆盖子a的范围，因此当我们把鼠标移向子a时，整个父a就失去了焦点，也可以理解为父a的hover属性已经不管用了，所以子菜单会消失。
后来我又用onmouseover和onmouseout尝试了一遍，发现仍然失败，更加坚定了我关于父a和子a的认识，我在网上搜索了一遍，并没有发现关于此结论的资料，也或许是我孤陋寡闻，没有系统学习过css所有的标签属性和方法，如果真的是这样，见笑了：）
七嘴八舌