纯css实现鼠标经过导航弹出下拉菜单特效

作者:sky 点击:1541 评论:0 发布时间:周六, 04/19/2014 - 21:24 所属分类:导航菜单

网站常用的导航菜单弹出效果，当用户的鼠标经过菜单栏时弹出一个下拉二级菜单，可根据自己的需求来自己美化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" /> <title>站长特效 css实现鼠标经过导航弹出菜单特效站长特效网</title> </head> <style type="text/css"> body { background: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 12px; } .menu { font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; width:500px; height:355px; background:#fff url(/img/20110410wwwzzjsnet.jpg) 0 20px no-repeat; position:relative; margin:2em 125px 0 125px; font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; } /* get rid of the default padding - margin and bullets */ .menu ul { padding:0; margin:0; list-style-type: none; } /* make menu horizontal */ .menu ul li { float:left; position:relative; } /* set up the default top level links */ .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:88px; height:1.5em; font-weight:bold; color:#888; border-bottom:8px solid #888; background:#fff; padding-left:10px; line-height:1.5em; margin-right:2px; } /* hack for IE5.5 to correct the faulty box model */ * html .menu ul li a, .menu ul li a:visited { width:98px; w\idth:88px; } /* hide the drop down menu */ .menu ul li ul { display: none; } /* remove all table style so that it does not interfere with the menu */ .menu table { margin:-1px; border-collapse:collapse; font-size:1em; } /* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */ /* style the top level hover */ .menu ul li:hover a, .menu ul li a:hover { color:#000; border-bottom:8px solid #606; } /* make the drop down menu show and correctly position it */ .menu ul li:hover ul, .menu ul li a:hover ul { display:block; position:absolute; top:1.2em; margin-top:11px; left:0; width:96px; border:1px solid #888; border-top:0; background:transparent; } /* style the drop down links with no hover */ .menu ul li:hover ul li a, .menu ul li a:hover ul li a { display:block; color:#000; border:0; margin:0; color:#333; font-weight:normal; font-size:0.9em; height:auto; line-height:1em; padding:5px; width:86px } /* style the drop down menu links when hovered */ .menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover { background:#888; color:#fff; } /* special styling for IE5.5 and IE6 - transparency is non validating */ .menu ul li a:hover ul { background:transparent filter: alpha(opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); opacity:0.8; margin-top:10px; /* for IE5.5 faulty box model */ marg\in-top:11px; /* for IE6 */ } /* IE5.5 hack for faulty box model in drop down menu */ .menu ul li a:hover ul li a { background:#ddd; width:96px; /* for IE5.5 faulty box model */ w\idth:86px; /* for IE6 */ } p.strike {text-decoration:line-through;} </style> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div class="menu"> <ul> <li><a class="drop" href="http://www.zzjs.net">特效一号</a> <table><tr><td> <ul> <li><a href="http://www.zzjs.net" title="zzjs.net一号子菜单">一号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net二号子菜单">二号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net三号子菜单">三号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net四号子菜单">四号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net五号子菜单">五号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net六号子菜单">六号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net七号子菜单">七号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net八号子菜单">八号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net九号子菜单">九号子菜单</a></li> </ul> </td></tr></table>  </li> <li><a href="http://www.zzjs.net">特效二号</a> <table><tr><td> <ul> <li><a href="http://www.zzjs.net" title="zzjs.net一号子菜单">一号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net二号子菜单">二号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net三号子菜单">三号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net四号子菜单">四号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net五号子菜单">五号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net六号子菜单">六号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net七号子菜单">七号子菜单</a></li> </ul> </td></tr></table>  </li> <li><a href="http://www.zzjs.net">特效三号</a> <table><tr><td> <ul> <li><a href="http://www.zzjs.net" title="zzjs.net一号子菜单">一号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net二号子菜单">二号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net三号子菜单">三号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net四号子菜单">四号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net五号子菜单">五号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net六号子菜单">六号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net七号子菜单">七号子菜单</a></li> </ul> </td></tr></table>  </li> <li><a href="http://www.zzjs.net">特效四号</a> <table><tr><td> <ul> <li><a href="http://www.zzjs.net" title="zzjs.net一号子菜单">一号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net二号子菜单">二号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net三号子菜单">三号子菜单</a></li> </ul> </td></tr></table> </li> <li><a href="http://www.zzjs.net">特效五号</a> <table><tr><td> <ul> <li><a href="http://www.zzjs.net" title="zzjs.net一号子菜单">一号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net二号子菜单">二号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net三号子菜单">三号子菜单</a></li> <li><a href="http://www.zzjs.net" title="zzjs.net四号子菜单">四号子菜单</a></li> </ul> </td></tr></table>  </li> </ul> </div> <br> <br> <br> <div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(1)

100%

踩一下

(0)

标签: