简洁下拉导航

直接使用代码

图片素材

css代码

 <style>


/* -----------------电脑导航--------------------------- */
.itop { width:100%; height:34px;line-height:34px; border-bottom:1px solid #e5e5e5; } 
.itopcl { width:400px; height:34px; float:left; font-size:12px; color:#333; } 
.itopcr { width:600px; float:right; font-size:12px; color:#333;} 
.itopcr a { float: right; color:#333; margin-right:10px;} 
.itopcr span { font-size:12px; float:right; margin-right:10px;} 
a:hover{text-decoration: none!important} 

.top-box{background:#fff;width:100%;z-index: 99999;box-shadow: 0 2px 5px #eee;}

.ilogoc { height:auto; padding:10px 15px 20px 15px;} 
.ilogoc img.ycdh { margin-top:8px;} 
.ilogol { width:650px; height:auto; float:left;} 
.ilogol img { float:left;} 
.ilogol p {  color:#006635; font-weight:bold;  line-height:26px; font-weight:100; margin:0px; padding:2px 12px; float:left;} 
.ilogol p strong {  color:#009966; font-size:22px; font-weight:500;} 
.ilogol p span { color:#009966; font-size:18px;} 
.ilogor { width:auto; float:right; margin-right:0px; margin-top:20px; background: url(http://www.bootfastui.cn/img/2021/0326//fuxing_06.gif) no-repeat left 12px; padding-left:50px; padding-top:5px;} 
.ilogor p { font-size:14px; color:#373736; line-height:25px; font-weight:100;} 
.ilogor p strong { font-size:25px; color:#009966; font-weight:100;} 
.ilogor p span { font-size:16px; color:#009966;} 

.inav { width:100%; height:45px; background-color:#f00;} 
.inavc ul.top-ul>li { display:inline-block;height:45px; text-align:center;font-size:20px; line-height:45px; float:left; background: url(http://www.bootfastui.cn/img/2021/0326//fuxing_11.gif) no-repeat right center;position: relative;} 
.inavc ul.top-ul>li a { display:block; color:#FFD700;padding:0 18px;} 
.inavc ul.top-ul>li a:active,.inavc ul li a:visited{text-decoration:none;} 
.inavc ul.top-ul>li a:hover { background-color:#B22222; text-decoration:none;} 
.inavc ul.top-ul>li a.tsy { background-color:#B22222; text-decoration:none;} 

.inav ul.son-ul{position: absolute;top:45px;left:0;z-index:9999;background: #f00;display:none;width:250px;}
.inav ul.son-ul>li{display: block;}
.inav ul.son-ul>li a { display:block; color:#FFD700;text-align: left;padding-left:18.5px; border-bottom:1px solid #aaa;background:none }
.inav ul.son-ul>li a:visited{text-decoration:none;}
.inav ul.son-ul>li a:hover { background-color:#B22222; text-decoration:none;}
</style>

HTML+JS代码

 
<!--新头部的开始-->
<section class="top-box hidden-xs">
  <div class="top-member bk-bottom pad-y5">
    <div class="container">
      <div class="line40 fleft">欢迎访问仙草园商城！</div>
      <div class="fright">
        <a href="/index/member/login" class="btn btn-success mar-right10">登录</a>
        <a href="/index/member/register" class="btn btn-success mar-right10">注册</a>

      </div>
    </div>
  </div>
  <div class="ilogo hidden-xs">
    <div class="ilogoc container">
      <div class=''>
        <div class="ilogol" style="width:900px"><img src="http://www.bootfastui.cn/img/2021/0326/logo2.jpg" width="150" />
          <div style="float: left;font-size:45px; margin-left:50px;margin-top:30px;color:#A020F0;font-family: 楷体;">
            改变动植物命运 造福人类大健康</div>
        </div>

        <div class="ilogor">
          <p>服务热线：<br>
            <strong>037168596777</strong>
          </p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div class="inav hidden-xs">
    <div class="inavc container">
      <div class='row'>
        <div class="col-md-12">
          <ul class="top-ul">
          
            <li><a href="/" class="tsy">网站首页</a></li>          
            <li><a href="/index/index/list2/id/44">公司简介</a></li>
            <li><a href="/index/index/list2/id/77">企业文化</a></li>


            <li><a href="/index/index/list2/id/45">中华博物馆</a></li>
            <li><a href="/index/index/list2/id/57">学术论坛</a></li>
            <li><a href="/index/index/list2/id/69">科技成果</a></li>


            <li><a href="/index/index/product_list">企业产品</a></li>
            <li><a href="http://世界大健康.com/" target="_blank">友情链接</a></li>


            <li><a href="">药王会员</a>
              <ul class="son-ul">
                <li><a href="/index/member/login">登录</a>
                </li>
                <li><a href="/index/member/register">注册</a>
                </li>
              </ul>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript">
  $(function () {
    $('.top-ul>li').hover(function () {
      $(this).find('ul').slideDown('fast');
    }, function () {
      $(this).find('ul').slideUp('fast');
    })
    $('.son-ul').hover(function () {
      $(this).stop().show();
    }, function () {
      $(this).slideUp('fast');
    })

  })
</script>