看过许多鼠标事件，都很复杂，太多的文件和繁杂的代码,而且好多都是用js实现，加载速度很慢。

 

这几天一直在找一种简单的实现效果，完全 CSS编写的效果，现在找到了，非常的少。

 

这就是完全 CSS实现的层效果，真的很不错的，稍微美化一下就非常好了。

 

希望大家多提意见……

 

CSS

 

.demo ul{position:relative;padding:0;margin:0;font-size:12px;}

 

.demo ul li{visibility:hidden;position:absolute;top:5px;left:180px;width:300px;padding:6px;border:#dfdfdf 1px solid;}/*显示li的内容的定位*/

 

.demo ul:hover li,.demo ul a:hover li{visibility:visible;}/*鼠标经过ul时，显示li的内容*/

 

.demo ul li a{margin-right:10px;color:#333;}

 

.demo ul b a{color:#333;width:200px;display:block;height:25px;line-height:25px;background:#fefefe;border:#dfdfdf 1px solid;text-decoration:none;text-indent:10px;}

 

HTML

 

<div <ul><b><a href=”#”>网页梦想吧</a></b>

 

<li><a href=”#”>网页设计</a><a href=”#”>网站开发</a><a href=”#”>网页笔记</a></li>

 

</ul>

 

</div>