下文是纯css实现的,鼠标滑过自动显示子栏目下拉菜单的效果实例。
<!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=utf-8" /> <title>genban.org</title> <style type="text/css" > body{ margin:0px; padding:0px; } li{ list-style:url(1.jpg); } a{ display:block; } a:link,a:visited { text-decoration: none; color:#000000; } .menu{ margin:0px auto; width:404px; height:21px; } .menu ul{ margin:0px; padding:0px; } .menu ul li{ position:relative; float:left; list-style:none; padding:2px; border:1px dotted; font-size:14px; width:95px; text-align: center; margin:0px; background:#999999; } .menu ul li ul{ display:none; } .menu ul li:hover ul{ display:block; position: absolute; left: 0px; top: 21px; } .menu a:link{ background:url(2.png) -137px -10px; } .menu a:hover{ background:url(2.png) -26px -10px; } </style> </head> <body> <p>genban.org导航</p> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻中心</a> <ul> <li><a href="1#">新手入门</a></li> <li><a href="2#">视频教程</a></li> <li><a href="3#">常见问题</a></li> </ul> </li> <li><a href="#">学习课程</a> <ul> <li><a href="1#">新手入门</a></li> <li><a href="2#">视频教程</a></li> <li><a href="3#">常见问题</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> </body> </html>
鼠标滑过显示的关键css,其实就是
.menu ul li:hover ul{ display:block; position: absolute; left: 0px; top: 21px; }
通过li:hover状态,来更改display,从none改为block,从而达到显示的目的。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!