<!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>导航代码</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//控制每个li的位置
$('.menu').each(function(i){
$(this).children('ul').children('li').each(function(j){
if(j==0){
$(this).css({'top':'35px','left':'-22px'});
}else{
$(this).css({'top':35+27*j+'px','left':'-'+(22+22*j)+'px'});
}
});
})
//触发事件
$('.menu').hover(function(){
$(this).addClass('m_hover');
$(this).children('ul').show();
},function(){
$(this).removeClass('m_hover');
$(this).children('ul').hide();
})
//更改hover状态样式
$('.menu ul li').hover(function(){
$(this).addClass('li_hover');
},function(){
$(this).removeClass('li_hover');
})
})
</script>
</head>
<body>
<div class="box">
<div class="menu"><p>联系我们</p></div>
<div class="menu">
<p>售后服务</p>
<ul>
<li><a href="#">售后测试</a></li>
</ul>
</div>
<div class="menu">
<p>在线留言</p>
<ul>
<li><a href="#">留言测试</a></li>
</ul>
</div>
<div class="menu"><p>新闻中心</p></div>
<div class="menu">
<p>工程案例</p>
<ul>
<li><a href="#">空气能热水工程</a></li>
<li><a href="#">太阳能热水工程</a></li>
<li><a href="#">余热回收机工程</a></li>
<li><a href="#">空调降温工程</a></li>
</ul>
</div>
<div class="menu">
<p>产品中心</p>
<ul>
<li><a href="#">空气能热水器</a></li>
<li><a href="#">太阳能热水器</a></li>
<li><a href="#">余热回收机器</a></li>
<li><a href="#">空调降温设备</a></li>
</ul>
</div>
<div class="menu"><p>公司简介</p></div>
<div class="menu"><p>首页</p></div>
</div>
</body>
</html>
jquery实现的鼠标悬停菱形导航下拉菜单源码.zip
版权申诉
78 浏览量
2022-11-07
00:26:22
上传
评论
收藏 27KB ZIP 举报
jquery实现的鼠标悬停菱形导航下拉菜单源码.zip （4个子文件） 
132686931044919296 css 
style.css 807B images 
bg.png 1KB
index.html 2KB js jquery.js 49KB资源评论
毕业_设计
- 粉丝: 1946
- 资源: 1万+
