直接使用代码

图片素材

无

css代码

   <style>
/* 组件-网站下拉导航 */
.my-pc-nav a{ text-decoration:none}
.my-pc-nav{  height:100px;}
.my-pc-nav img.logo{ display:block;float:left; margin:10px;width: 150px; height:80px;}
.my-pc-nav ul.nav-one{ float:left;padding:0;margin:0;margin-top:30px; margin-left:20px;}
.my-pc-nav ul.nav-one li{ float:left; width:115px;   position:relative}
.my-pc-nav ul.nav-one li a{ color:#fff;  display:inline-block; text-align:center; height:80px; line-height:50px; font-family: "微软雅黑", "新宋体";  font-size:1.2em; }
.my-pc-nav ul.nav-one li a:hover,.my-pc-nav ul.nav-one li a.current{ color:#0C9}

.my-pc-nav ul.nav-two{ width:200px; position:absolute; top:70px; left:0; z-index:9999 ; background:#fff;
filter:alpha(opacity=70);  -moz-opacity:0.7;  -khtml-opacity: 0.7;  opacity: 0.7;  padding:0;margin:0; display:none
;padding-bottom:20px;}
.my-pc-nav ul.nav-two li { border-bottom:1px solid #666; width:80%;margin-left:10%}
.my-pc-nav ul.nav-two li a{ color:#000; text-align:left;padding-left:20px; width:100%;height:40px; line-height:40px;}
.my-pc-nav ul.nav-two li a:hover{ color:#C33} 
</style>

HTML+JS代码

   <div class="container visible-md-block visible-lg-block">
      <div class="my-pc-nav bg-red">

        <img src="/Public/images/img32.jpg" class="logo" />
        <ul class="nav-one">
          <li><a href="" class="pcmenu current" style="width:100px;">网站首页</a>
            <ul class="nav-two bk">
              <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="" class="pcmenu ">演出咨询</a>
            <ul class="nav-two bk">
              <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="" class="pcmenu">视频展示</a></li>
          <li><a href="" class="pcmenu">景点介绍</a></li>
          <li><a href="" class="pcmenu">参观指南</a></li>
          <li><a href="" class="pcmenu">文史园地</a></li>
          <li><a href="" class="pcmenu">综合快讯</a></li>

        </ul>
      </div>
    </div>



    <script type="text/javascript">
      $(function () {
        $('.pcmenu').hover(function () {
          $(this).siblings('ul').slideDown('fast');
        }, function () {
          $(this).siblings('ul').slideUp('fast');
        })
        $('.nav-two').hover(function () {
          $(this).stop().show();
        }, function () {
          $(this).slideUp('fast');
        })

      })
    </script>
    <div class="clear"></div>