简单的jQuery的下拉菜单

最新推荐文章于 2023-10-06 22:18:06 发布

yanli_xu

最新推荐文章于 2023-10-06 22:18:06 发布

阅读量638

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>简单的jQuery的下拉菜单</title>
<style type="text/css">
body{ font:12px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",Arial; }
/*style the main menu*/
.myMenu { margin: 0; padding: 0; }
.myMenu li { list-style: none; float: left; }
.myMenu li a:link, .myMenu li a:visited { display: block; text-decoration: none; background-color: #09F; padding: 0.5em 2em; margin: 0; border-right: 1px solid #fff; color: #FFF; }
.myMenu li a:hover { background-color: #0CF; } 
/*style the sub menu*/
.myMenu li ul { position: absolute; visibility: hidden; border-top: 1px solid #fff; margin: 0; padding: 0; }
.myMenu li ul li { display: inline; float: none; }
.myMenu li ul li a:link, .myMenu li ul li a:visited { background-color: #09F; width: auto; }
.myMenu li ul li a:hover { background-color: #0CF; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.myMenu > li').bind('mouseover', openSubMenu);
	$('.myMenu > li').bind('mouseout', closeSubMenu);
	
	function openSubMenu() {
		$(this).find('ul').css('visibility', 'visible');	
	};
		
	function closeSubMenu() {
		$(this).find('ul').css('visibility', 'hidden');	
	};		   
});
</script>
</head>

<body>

<ul class="myMenu">
    <li><a href="#">网站首页</a></li>
    <li><a href="#">关于我们</a>
        <ul>
            <li><a href="#">公司简介</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">资质荣誉</a></li>
            <li><a href="#">发展历程</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </li>
    <li><a href="#">服务项目</a>
        <ul>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">网站推广</a></li>
            <li><a href="#">网站优化</a></li>
            <li><a href="#">400电话</a></li>
        </ul>
    </li>
    <li><a href="#">新闻中心</a>
        <ul>
            <li><a href="#">公司新闻</a></li>
            <li><a href="#">行业动态</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

参考文献：http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php