简单的div+css+jquery菜单导航
来源：互联网 发布：杭州淘宝供货商怎么找 编辑：程序博客网 时间：2024/05/16 07:53
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>导航菜单</title><script type="text/javascript" src="jquery-1.5.1.min.js"></script><style type="text/css">a{text-decoration: none;}.topnav {list-style: none;margin: 0;background: #333;font-size: 14px;float: left;width: 920px;padding: 0 20px;}.topnav li {float: left;margin: 0;padding: 0 15px;position: relative;}.topnav li a {padding: 10px 5px;display: block;float: left;color: #fff;}.subnav {list-style: none;position: absolute;left: 0;top: 35px;display:none;margin: 0;padding: 0;background: #333;}.subnav li {margin: 0;padding: 0;width:100px;clear: both;white-space:nowrap;width:100%;}.subnav li a{float: left;}</style><script type="text/javascript">$(function(){$('.topnav li a').hover(function(){var topnavLi = $(this).parent();var subnavUl = topnavLi.find('.subnav');subnavUl.slideDown('fast').show();topnavLi.hover(function(){},function(){subnavUl.slideUp('slow');});},function(){});});</script></head><body><div><ul class="topnav"><li><a href="#">主页</a></li><li><a href="#">菜单1</a><ul class="subnav"><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#">菜单2</a><ul class="subnav"><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li><li><a href="#">子菜单3</a></li></ul></li><li><a href="#">菜单3</a></li></ul></div></body></html>
