直接使用代码

图片素材

无

css代码

   <style>  
.fl {float: left;}
.fr {float: right;}
.w1200 {width: 1200px;margin: 0 auto;}
input {background: none;border: 0 none;}
      
.header_main {width: 100%;height: 120px;z-index: 100;background: #fff;}
.header_main .logo {width: 540px;height: 80px;display: block;margin-top: 15px;}
.header_main .tel {width: 300px;padding-top: 32px;line-height: 26px;margin-left: 30px;font-size: 30px;font-weight: bold;line-height: 57px; color: #84aebe;font-family: arial;}

.header_main .search {width: 300px;height: 41px;line-height: 41px;margin-top: 38px;border: 2px solid #aec9d4;position: relative;}
.header_main .search .sbtn {width: 100px;height: 41px;font-size: 16px;text-align: center;color: #fff;position: absolute;right: -2px;top: -2px;background: #aec9d4;cursor: pointer;}
.header_main .search .stxt {width: 200px;padding-left: 10px;height: 41px;line-height: 41px;border: 0px;background: none;outline: none;color: #999;}


.nav_main {width: 100%;height: 60px;line-height: 60px;background: #aec9d4;position: relative;z-index: 3;}


.nav_main .nav li {float: left;width: 170px;display: block;position: relative;z-index: 10;font-size: 16px;border-right: 1px solid #fff;text-align: center;}
.nav_main .nav li:first-child {border-left: 1px solid #fff;background: none;}
.nav_main .nav li:first-child.hover {background-color: #fff;color: fff;}
.nav_main .nav li a {display: block;color: #fff;font-size: 16px;}
.nav_main .nav li a:hover, .nav_main .nav li a.hover, .nav_main .nav li #hover2 {background: #61a3be;}
.hover a{color: #000 !important;}
.nav_main .nav dl {width: 169px;background: #fff;position: absolute;left: 0;top: 60px;z-index: 12;border: 1px solid #aec9d4;}


.nav_main .nav dl {visibility: hidden;transition: all .6s ease 0s;transform: translate3d(0, 10px, 0);-moz-transform: translate3d(0, 10px, 0);-webkit-transform: translate3d(0, 10px, 0);}
.nav_main .nav li:hover dl {opacity: 1;visibility: visible;transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);}
.nav_main .nav dl dd {line-height: 49px;height: 49px;border-top: 1px solid #e5e5e5;text-align: left;position: relative;z-index: 12;display: block;width: 100%;}
.nav_main .nav dl dd:first-child {border: none;}
.nav_main .nav dl dd a {color: #666;font-size: 16px;padding: 0;width: 100%;text-align: center;}
.nav_main .nav dl dd a:hover, .nav_main .nav dl dd a.hover {background: #aec9d4;color: #fff;}
</style>

HTML+JS代码

     
    <!--页头开始-->


<div class="header_main">
    <div class="header w1200 "><a class="logo fl" href="/" title="河南沃祥电气设备有限公司" aos="fade-right" aos-easing="ease" aos-duration="700" aos-delay="100" aos-duration="700"> <img src="/Public/images/img32.jpg" alt="河南沃祥电气设备有限公司" width="120"></a>
      <div class="tel fl" aos="fade-left" aos-easing="ease" aos-duration="700" aos-delay="100">0371-53381000
        </div>
      <!--搜索栏开始-->
      <div class="search fr" aos="fade-left" aos-easing="ease" aos-duration="700" aos-delay="100">
        <form action="/plus/search.php">
          <input type="hidden" name="kwtype" value="0" />
          <input class="stxt" type="text" name="q" value="请输入关键字" onfocus="if(this.value==defaultValue)this.value=''" onblur="if(this.value=='')this.value=defaultValue"/>
          <input type="submit" class="sbtn" value="搜索"/>
        </form>
      </div>
      <!--搜索栏结束--> 
    </div>
  </div>
  <!--页头结束--> 
  
  <!--导航开始-->
  <div class="nav_main" aos="fade-down" aos-easing="ease" aos-duration="700">
    <div class="nav w1200">
      <ul  >
        <li  class='hover'  ><a href="/" title="网站首页">网站首页</a></li>
         <li><a href="" title="关于我们" >关于我们</a>
          <dl>
             
            <dd><a href="" title="企业文化">企业文化</a> </dd>
             
            <dd><a href="" title="公司荣誉">公司荣誉</a> </dd>
             
          </dl>
        </li><li><a href="" title="产品管理" class=''>产品管理</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>
             
            <dd><a href="" title="ABB">ABB</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>
             
            <dd><a href="" title="上海蓝科">上海蓝科</a> </dd>
             
            <dd><a href="" title="西门子">西门子</a> </dd>
             
          </dl>
        </li><li><a href="" title="新闻动态" class=''>新闻动态</a>
          <dl>
             
            <dd><a href="" title="行业新闻">行业新闻</a> </dd>
             
            <dd><a href="" title="企业新闻">企业新闻</a> </dd>
             
          </dl>
        </li><li><a href="" title="成功案例" class=''>成功案例</a>
          <dl>
             
            <dd><a href="" title="上海市案例">上海市案例</a> </dd>
             
            <dd><a href="" title="郑州市案例">郑州市案例</a> </dd>
             
            <dd><a href="" title="西安市案例">西安市案例</a> </dd>
             
          </dl>
        </li><li><a href="/a/zaixianliuyan/" title="在线留言" class=''>在线留言</a>
          <dl>
             
          </dl>
        </li><li><a href="" title="联系我们" class=''>联系我们</a>
          <dl>
             
          </dl>
        </li>  
      </ul>
    </div>
  </div>

  <!--导航结束-->