精简版的二级下拉导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式。在没有经过美化的情况下,是很难看的,如果您有需要,就用心修改一下,美化一番,还是不错的菜单哦!
<html> <head> <title>二级菜单,响应鼠标</title> <style type="text/css"> .mainNav ul li {float: left;width: 150px;} .mainNav li ul {display: none;} li.hover ul {display: block;} </style> <script language="javascript" type="text/javascript"> function showSubLevel(Obj){ Obj.className="hover"; } function hideSubLevel(Obj){ Obj.className=""; } </script> </head> <body> <div class="mainNav"> <ul> <li 一级栏目A <ul> <li>A的二级栏目</li> <li>A的二级栏目</li> <li>A的二级栏目</li> </ul> </li> <li 一级栏目B <ul> <li>B的二级栏目</li> <li>B的二级栏目</li> <li>B的二级栏目</li> </ul> </li> <li 一级栏目C <ul> <li>B的二级栏目</li> <li>B的二级栏目</li> <li>B的二级栏目</li> </ul> </li> </ul> </div> </body> </html> <br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center> |
文章源自:烈火网,原文:http://www.veryhuo.com/a/view/36622.html