<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单</title>
<link href="Images/MenuCaseCss.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Images/jquery.js"></script>//这个是jQuery文件库
<script type="text/javascript">
$(function(){
var varli=$("#nav>li");
$(varli).mouseover(function(){
$(this).addClass("smhover");})
.mouseout(function(){
$(this).removeClass();
});
})
</script>
</head>
<body>
<div>
<ul id="nav">
<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>
<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="#">服务介绍四</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="#">案例四</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="#">关于我们四</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="#">再线演示四</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="#">联系我们四</a></li>
<li><a href="#">联系我们五</a></li>
<li><a href="#">联系我们六</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
导航效果
最新推荐文章于 2023-04-08 18:54:17 发布