html
<!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弹性下拉导航效果 - www.tinkpic.com - 思图素材网</title>
<style>
/*reset 
--------------------*/
*{
margin:0;
padding:0;
}
img{
border:none;
padding:0;
margin:0;
}
/*link & type
--------------------*/
body{background:#28953a;}
body, div{
font:12px/20px "微软雅黑";
margin:0;
}
div{
margin:0 auto;
}
ul, dl, ol{
margin:0;
padding:0;
list-style:none;
}
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
.floatlft{
float:left;
}
.floatrgt{
float:right;
}
.Inline{
display:inline;
}
.bold, .bold a{
font-weight:bold;
}
.overauto{
overflow:auto;
}
a{
color:#676767;
text-decoration:none;
}
a:hover{
color:#0265ca;
text-decoration:underline;
}
/*menu开始*/
#menu_bg{ left:29px;top:25px;position:absolute;z-index:11;height:50px;width:915px}
#menu_bg .imenu_bg{width:915px;height:50px;margin:0 auto;position:relative;top:0;}


.imenu{width:182px;height:50px;line-height:50px; text-align:center;font-family:"微软雅黑";font-size:16px;cursor:pointer;color:#FFF;float:left;background:transparent url(../demo/images/nav-bg.jpg) repeat-x;margin-right:1px;}
.imenu a{ color:#FFF;text-decoration:none}
.imenu a:hover{ text-decoration:underline;}

.imenu_on{width:182px;height:50px;background-color:#FFF;color:#015d22;cursor:pointer; float:left;line-height:50px; text-align:center;font-family:"微软雅黑";font-size:16px;margin-right:1px;font-weight:bold;}
.imenu_on a{color:#015d22;text-decoration:none;}
.imenu_on a:hover{color:#015d22; text-decoration:underline; }

.submnu{width:915px; *width:915px;_width:915px;border-top:none; margin:0 auto; display:none; position:absolute; left:0px; top:50px;z-index:1000; background-color:#FFFFFF;filter:alpha(opacity=95);-moz-opacity:0.8;}

/*---------------中心---------------*/
#gyyz{width:915px;height:130px; margin:10px 0 0 15px;}
#gyyz ul{ font-weight:bold; height:120px; float:left; text-align:left;margin-right:10px;width:120px;*width:120px;_width:120px;float:left;}

#gyyz ul.li_content li{line-height:24px; text-align:left;height:24px;background:url(../demo/images/nav-icon.gif) no-repeat left center; padding-left:18px;}
#gyyz ul.li_content li a{ margin-left:6px; font-family:"微软雅黑"; font-size:14px; font-weight:bold; color:#015d22;height:24px; line-height:24px;}
#gyyz ul.li_content li a:hover{color:#015d22;line-height:24px; height:24px; text-decoration: underline;}
#gyyz ul.li_content li img{ padding-top:8px;}

#gyyz .pic001{ margin-top:10px; float:left;}
#gyyz .pic001 img{ float:left;height:106px;width:179px; margin-right:15px;padding:5px;border:1px solid #c9caca;}
/*---------------中心---------------*/

/*---------------整形美容中心---------------*/
#zx{height:240px;width:915px;margin:10px 0 0 15px;}
.s-zx{height:160px; float:left;}
.s-zx ul{ font-weight:bold;height:150px;*height:150px; text-align:left;float:left;width:113px;*width:113px;_width:113px;}

.s-zx ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px; text-align:left; background:url(../demo/images/icon2.gif) no-repeat left center; padding-left:10px; font-weight:normal;}
.s-zx ul.li_content li a{ font-size:12px; color:#898989;}
.s-zx ul.li_content li a:hover{color:#015d22;line-height:22px; height:22px;text-decoration: underline;}
.s-zx ul.li_content li img{ padding-top:8px;}

.s-zx ul.li_content .zxdl{font-size:14px; font-weight:bold; font-family:"微软雅黑";color:#015d22;line-height:24px; text-align:left;height:24px;background:url(../demo/images/nav-icon.gif) no-repeat left center; padding-left:18px;}
.s-zx ul.li_content .zxdl a {font-size:14px; font-weight:bold; color:#015d22;}

#zx .piczx{height:66px;float:left;width:915px; margin-top:5px;}
#zx .piczx img{height:66px;width:100px;float:left;border:1px solid #bdb9b8; margin-right:11px;}
/*---------------整形美容中心---------------*/

/*---------------皮肤美容中心---------------*/
#pf{height:300px;width:915px;margin:10px 0 0 15px;}
.s-pf{height:160px; float:left;}
.s-pf ul{ font-weight:bold;height:150px;*height:150px; text-align:left;float:left;width:150px;*width:150px;_width:150px;}

.s-pf ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px; text-align:left; background:url(../demo/images/icon2.gif) no-repeat left center; padding-left:10px; font-weight:normal;}
.s-pf ul.li_content li a{ font-size:12px; color:#898989;}
.s-pf ul.li_content li a:hover{color:#015d22;line-height:22px; height:22px;text-decoration: underline;}
.s-pf ul.li_content li img{ padding-top:8px;}

.s-pf ul.li_content .zxdl{font-size:14px; font-weight:bold; font-family:"微软雅黑";color:#015d22;line-height:24px; text-align:left;height:24px;background:url(../demo/images/nav-icon.gif) no-repeat left center; padding-left:18px;}
.s-pf ul.li_content .zxdl a {font-size:14px; font-weight:bold; color:#015d22;}

#pf .piczx{height:122px;float:left;width:915px; margin-top:5px;}
#pf .piczx img{height:122px;width:280px;float:left; padding:2px; border:1px solid #bdb9b8; margin-right:11px;}
/*---------------皮肤美容中心---------------*/

/*---------------无创美容中心---------------*/
#wc{width:915px;height:150px; margin:10px 0 0 15px;}
#wc ul{ font-weight:bold; height:140px; float:left; text-align:left;margin-right:5px;width:110px;*width:110px;_width:110px;float:left;}

#wc ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px; text-align:left; background:url(../demo/images/icon2.gif) no-repeat left center; padding-left:10px; font-weight:normal;}
#wc ul.li_content li a{ font-size:12px; color:#898989;}
#wc ul.li_content li a:hover{color:#015d22;line-height:22px; height:22px;text-decoration: underline;}
#wc ul.li_content li img{ padding-top:8px;}

#wc ul.li_content .zxdl{font-size:14px; font-weight:bold; font-family:"微软雅黑";color:#015d22;line-height:24px; text-align:left;height:24px;background:url(../demo/images/nav-icon.gif) no-repeat left center; padding-left:18px;}
#wc ul.li_content .zxdl a {font-size:14px; font-weight:bold; color:#015d22;}

#wc .pic001{ margin-top:10px; float:left;}
#wc .pic001 img{ float:left;height:120px;width:160px; margin-right:10px;padding:5px;border:1px solid #c9caca;}

/*---------------无创美容中心---------------*/

/*---------------牙齿美容中心---------------*/
#mc{width:915px;height:150px; margin:10px 0 0 15px;}
#mc ul{ font-weight:bold; height:140px; float:left; text-align:left;margin-right:5px;width:125px;*width:125px;_width:125px;float:left;}
#mc .ul2{ font-weight:bold; height:140px; float:left; text-align:left;margin-right:5px;width:150px;*width:150px;_width:150px;float:left;}

#mc ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px; text-align:left; background:url(../demo/images/icon2.gif) no-repeat left center; padding-left:10px; font-weight:normal;}
#mc ul.li_content li a{ font-size:12px; color:#898989;}
#mc ul.li_content li a:hover{color:#015d22;line-height:22px; height:22px;text-decoration: underline;}
#mc ul.li_content li img{ padding-top:8px;}

#mc ul.li_content .zxdl{font-size:14px; font-weight:bold; font-family:"微软雅黑";color:#015d22;line-height:24px; text-align:left;height:24px;background:url(../demo/images/nav-icon.gif) no-repeat left center; padding-left:18px;}
#mc ul.li_content .zxdl a {font-size:14px; font-weight:bold; color:#015d22;}

#mc .pic001{ margin-top:10px; float:left;}
#mc .pic001 img{ float:left;height:115px;width:150px; margin-right:10px;padding:5px;border:1px solid #c9caca;}
/*---------------牙齿美容中心---------------*/
</style>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  //导航菜单
  $('div[topnav]').hover(function() {
    var it = $(this).attr('attr');
    if(it === 'undefined') return false;
      var heht = $(this).find('#' + it).height() + 20 + "px";
    $(this).find('.submnu').height(heht);
    //代码整理:www.tinkpic.com - 思图素材网
      $(this).stop().find('.submnu').animate({height:'show'}, {queue:false, duration:500, easing:'easeOutBounce'});
    $(this).stop().attr('class', 'imenu_on').siblings().attr('class', 'imenu');
  }, function() {
      $(this).stop().find('.submnu').hide();
    $(this).stop().attr('class', 'imenu');
  });  
 
});  
</script>

</head>
<body>

 <!--主导航代码开始-->
<div id="menu_bg">
  <div class="imenu_bg"> 
  
  <div class="imenu" topnav="nav5" attr="gyyz"><a href="https://www.tinkpic.com">关于叶子</a>
        <div class="submnu">
          <div id="gyyz">
            <ul class="li_content">
        <li><a href="https://www.tinkpic.com" target="_blank">品牌理念</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">典雅环境</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">专家团队</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">安全保障体系</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">容貌设计中心</a></li>
            </ul>
            <ul class="li_content">
        <li><a href="https://www.tinkpic.com" target="_blank">尖端设备</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">叶子视频</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">联系我们</a></li>
              <li><a href="https://www.tinkpic.com" target="_blank">加入我们</a></li> 
            </ul>             
            <div class="pic001">
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/img.jpg" alt="医院典雅环境" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/img2.jpg" alt="权威专家团队" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/img3.jpg" alt="国际顶级设备" /></a>
            </div>
          </div>
        </div>
      </div>
       
      <div class="imenu"  topnav="navzx" attr="zx"><a href="#">整形中心</a>
        <div class="submnu">
          <div id="zx">
            <div class="s-zx">
              <ul class="li_content">
                <li class="zxdl">眼部整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">重脸术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">祛眼袋</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">开眼角</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">眼尾提升</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">眼睑下垂矫正</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">鼻部整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">假体隆鼻</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">鼻尖整形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">鼻翼整形</a></li>
                
                <li class="zxdl">眉部整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">眉弓垫高</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">三合一美眉</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">唇部整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">丰唇术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">厚唇改薄</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">人中成形术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">唇珠成形术</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">面部轮廓</li>
                <li><a href="https://www.tinkpic.com" target="_blank">下颌角整形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">下颏整形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">额头整形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">颞部填充</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">颊脂垫祛除</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">颧弓颧骨整形</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">乳房整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">假体隆胸</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">自体脂肪隆胸</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">副乳切除术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">乳房上提术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">巨乳缩小术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">乳头乳晕矫正</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">吸脂整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">面部吸脂</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">腿部吸脂</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">臀部吸脂</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">手臂吸脂</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">腰腹吸脂</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">除皱整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">SMAS除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">面部提升术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">注射除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">激光除皱</a></li>
              </ul>
              
              <ul class="li_content">
                <li class="zxdl">耳部整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">副耳切除术</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">招风耳修复</a></li>
                <li class="zxdl">私密整形</li>
                <li><a href="https://www.tinkpic.com" target="_blank">女性私密整形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">男性私密整形</a></li>
                <li class="zxdl"><a href="https://www.tinkpic.com" target="_blank">毛发种植</a></li>
              </ul>
              
            </div>
            <div class="piczx">
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img1.jpg" alt="叶子晴彩眼部整形" /></a> 
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img3.jpg" alt="叶子鼻部整体雕塑" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img4.jpg" alt="" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img5.jpg" alt="叶子精致脸型雕塑" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img6.jpg" alt="叶子数字化隐形丰胸" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img7.jpg" alt="叶子360°聚能吸脂" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img8.jpg" alt="" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img9.jpg" alt="" /></a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="imenu"  topnav="navpf" attr="pf"><a href="#">皮肤中心</a>
        <div class="submnu">
          <div id="pf">
            <div class="s-pf">
              <ul class="li_content">
                <li class="zxdl">美白祛斑</li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿2号三维彩光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">科医人复合彩光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">Q开关色素激光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿像束激光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">翠绿宝石祛斑王</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">MedLite C6</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">除皱紧肤</li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿RF射频除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿像束激光</a></li>                
              </ul>
              <ul class="li_content">
                <li class="zxdl">无痛脱毛</li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿SHR冰点脱毛</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">科医人复合彩光脱毛</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">痤疮疤痕</li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿2号三维彩光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">飞顿像束激光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">科医人复合彩光</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">MedLite C6</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">其他美容</li>
                <li><a href="https://www.tinkpic.com" target="_blank">祛除红血丝</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">祛 痣</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">艺术纹绣</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">洗纹身</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">护肤产品</li>
                <li><a href="https://www.tinkpic.com" target="_blank">瑞士瑞研Cellcosmet</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">意大利A'Pure</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">法国雅诗敦Institut</a></li>
              </ul>             
              
              
              
            </div>
            <div class="piczx">
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img21.jpg" alt="" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img22.jpg" alt="" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img23.jpg" alt="" /></a>
            </div>
          </div>
        </div>
      </div>
      
      
        <div class="imenu" topnav="navwc" attr="wc"><a href="#">微创中心</a>
        <div class="submnu">
          <div id="wc">
            <ul class="li_content">
                <li class="zxdl">微创除皱</li>
                <li><a href="https://www.tinkpic.com" target="_blank">爱贝芙除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">胶原蛋白除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">玻尿酸除皱</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">BOTOX除皱</a></li>
              </ul>
            <ul class="li_content">
                <li class="zxdl">微创塑形</li>
                <li><a href="https://www.tinkpic.com/" target="_blank">爱贝芙塑形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">胶原蛋白塑形</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">玻尿酸塑形</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">微创瘦脸</li>
                <li><a href="https://www.tinkpic.com" target="_blank">BOTOX瘦脸</a></li>
              </ul>             
            <div class="pic001">
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img31.jpg" alt="爱贝芙注射美容" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img32.jpg" alt="BOTOX注射除皱美容" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img33.jpg" alt="玻尿酸注射美容" /></a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="imenu" topnav="navmc" attr="mc"><a href="#">美齿中心</a>
        <div class="submnu">
          <div id="mc">
            <ul class="li_content">
                <li class="zxdl">全能仿生美容冠</li>
                <li><a href="https://www.tinkpic.com" target="_blank">金属美容冠</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">全瓷美容冠</a></li>
              </ul>
            <ul class="li_content">
                <li class="zxdl">牙齿正畸</li>
                <li><a href="https://www.tinkpic.com" target="_blank">无托槽隐形矫正</a></li>
              </ul>
              <ul class="li_content ul2">
                <li class="zxdl">牙齿美白</li>
                <li><a href="https://www.tinkpic.com" target="_blank">第二代Beyond冷光美白</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">超声波清洁</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">喷砂清洁</a></li>
              </ul>
              <ul class="li_content">
                <li class="zxdl">牙齿综合治疗</li>
                <li><a href="https://www.tinkpic.com" target="_blank">活动义齿修复</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">根管治疗</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">牙齿填充</a></li>
                <li><a href="https://www.tinkpic.com" target="_blank">无痛拔牙</a></li>
              </ul>       
            <div class="pic001">
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img41.jpg" alt="美容冠7天快速矫正成人畸形牙" /></a>
            <a href="https://www.tinkpic.com" target="_blank"><img src="/demo/images/nav-img43.jpg" alt="Beyond冷光美白牙齿美白只需30分钟" /></a>
            </div>
          </div>
        </div>
      </div>
      
   </div>
</div>
<!--主导航代码结束 - www.tinkpic.com - 思图素材网-->  
</body>
</html>
css

                                
javascript

                                
提交运行