zoukankan      html  css  js  c++  java
  • jquery导航二级栏目下拉

    <div class="Nav_L L">
    <ul>
    <li><a href="" title="">首页</a></li>
    <li><a href="" title="">关于我们</a>
    <dl>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    </dl>
    </li>
    <li><a href="" title="">康复中心</a>
    <dl>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    <dd><a href="" title="">医院简介</a></dd>
    </dl>
    </li>
    <li><a href="" title="">体检中心</a></li>
    <li><a href="" title="">会员通道</a></li>
    <li><a href="" title="">配套服务</a></li>
    <li><a href="" title="">医院资讯</a></li>
    <li><a href="" title="">客户中心</a></li>
    <li><a href="" title="">联系我们</a></li>
    </ul>
    </div>
    <script type="text/javascript">
        $(".Nav_L ul li ").hover(function () {
            $(this).find("dl").stop(false, true).slideToggle(300);
    
        });
    
    </script>
    .Nav{background:#00a0aa;height:55px;}
    .Nav .Nav_L ul li
    {float:left} .Nav .Nav_L ul li a{color:#fff;line-height:55px;font-size:16px;display:inline-block;width:110px;text-align:center} .Nav .Nav_L ul li:hover,.Nav .Nav_L ul li a.curent{background:#fb7538;} .Nav .Nav_L ul li dl{display:none} .Nav .Nav_L ul li dl dd{height:30px;margin:0;padding:0} .Nav .Nav_L ul li dl dd a{display:inline-block;height:30px;line-height:30px;width:110px;background:#fb7538;font-size:14px} .Nav .Nav_L ul li dl dd a:hover{background:#e66c34;}

    最终效果

  • 相关阅读:
    C++ 整型长度的获取 不同的系统
    第二章习题 C++
    输入cin对象的用法
    将Mnist手写数字库转化为图片形式 和标签形式
    寻找图片中数字的轮廓并裁剪 扣取数字
    Linux中的日志功能
    Linux中的系统默认日志
    Linux中进程在前后台的切换
    Linux中的服务管理
    Linux中的流程控制语句
  • 原文地址:https://www.cnblogs.com/qigege/p/5307367.html
Copyright © 2011-2022 走看看