导航效果

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值