注意要引入正确的jQuery文件
<!DOCTYPE html>
<html>
<head>
<title>下拉式菜单</title>
<meta charset="utf-8">
<style type="text/css">
li{list-style-type: none;
padding: 0px;
margin: 0px;
}
a{color: #fff;text-decoration: none;
display: block;
padding: 5px;}
ul li{
width: 100px;
float: left;
border-left:1px solid #fff;
background-color: #555;
}
.submenu{
position: relative;
left:-6px;
top: -4px;
padding: 5px;
width: 100px;
</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$(".submenu").hide();
$("#menu li").hover(
function(){
$(this).find('ul').slideDown("fast");
$(this).find('a:first').css('background-color','red');
},
function(){
$(this).find('ul').slideUp('fast');
$(this).find('a').css('background-color','#555');
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>下拉式菜单</h1><br>
</div>
<div id="content">
<ul id="menu">
<li><a href="#">产品</a>
<ul class="submenu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">HTML 5</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul class="submenu">
<li><a href="#">在线服务</a></li>
<li><a href="#">文件下载</a></li>
<li><a href="#">据点查询</a></li>
</ul>
</li>
<li><a href="#">查询</a>
<ul class="submenu">
<li><a href="#">再线查询</a></li>
<li><a href="#">电邮查询</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
