直接使用代码

图片素材

css代码

<style type="text/css">
    .container2{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
    @media (min-width:768px){.container2{width:750px}
    }
    @media (min-width:992px){.container2{width:970px}
    }
    @media (min-width:1200px){.container2{width:1370px}
    }
    .com-top{background:url(/Public/images/banner2.jpg) no-repeat;background-size:100% auto;min-height:350px;padding:40px 0}
    .com-top .nav-left{float:left;width:850px}
    .com-top .nav-left img{margin-right:10px;vertical-align:middle;float:left}
    ul.nav-one{float:left;padding:0;margin:0;margin-left:20px;margin-bottom:20px}
    ul.nav-one>li{float:left;display:inline-block;margin-left:20px;position:relative;padding:0 10px}
    ul.nav-one>li a{color:#fff;display:inline-block;text-align:center;font-family:DIN;height:40px;line-height:40px;font-family:"微软雅黑","新宋体";font-size:15px}
    ul.nav-one>li:hover{background:#c83b1b;border-radius:6px}
    ul.nav-two{width:240px;position:absolute;top:40px;left:0;z-index:9999;background:#ffffffcc;padding:0 0;margin:0;display:none;padding-bottom:20px;border-radius:6px}
    ul.nav-two li{height:30px;line-height:30px;margin-left:15px;position:relative;display:block}
    ul.nav-two>li a{color:#000;font-weight:700;font-size:14px;font-family:DIN}
    ul.nav-two>li a:hover{text-decoration:underline;color:#000}
    ul.nav-two>li span{display:block;float:right;width:25px;line-height:30px;color:#666;font-size:12px}
    ul.nav-two>li li:hover>span{color:#000}
    ul.nav-three{width:240px;position:absolute;top:0;left:224px;z-index:9999;background:#ffffffcc;padding:0 0;margin:0;display:none;padding-bottom:20px;border-radius:6px}
    .com-top .nav-right{float:right;width:400px;text-align:right}
    .com-top .nav-right span{display:inline-block;line-height:30px;border-right:0 solid #fff;padding-right:0;color:#fff;margin-right:0}
    .com-top .nav-right a.lang{color:#fff;display:inline-block;margin-right:15px}
    .com-top .nav-right a.lang:hover{color:#eee}
    .com-top .nav-right a.lo{display:inline-block;padding:8px 30px;border:1px solid #fff;border-radius:6px;margin-left:10px;color:#fff;font-size:16px;font-weight:700}
    .com-top .nav-right a.btn-zhuce{background:#fff;color:#101010}
    .com-top .nav-right a.lo:hover{box-shadow:0 5px 10px #666}
    .com-top .input-search{display:block;line-height:40px;width:100%;background:0 0;border-radius:6px;border:1px solid #fff;outline:0;text-align:center;color:#fff}
    .index-form{position:relative;width:100%;margin:0 auto;color:#fff}
    .index-form button,.index-form input{border:none;outline:0}
    .index-form input{width:100%;height:42px;padding-left:13px;padding-right:46px;color:#eee}
    .index-form input::-webkit-input-placeholder{color:#eee}
    .index-form input::-moz-placeholder{color:#eee}
    .index-form input:-moz-placeholder{color:#eee}
    .index-form input:-ms-input-placeholder{color:#eee}
    .index-form button{height:42px;width:42px;cursor:pointer;position:absolute}
    .bar2 button,.bar2 input{border-radius:3px}
    .bar2 input{background:linear-gradient(to right,#f92d02c4,#f92d02c4);color:#fff;text-align:center}
    .bar2 button{height:30px;width:30px;top:5px;right:8px;background:#21666b}

</style>

HTML+JS代码

  <div class="com-top">
    <div class="container2">
        <div class="nav-left">
            <a href="/index"><img src="/Public/images/logo.png" width="180" /></a>

            <ul class="nav-one">
                <li><a href="/products-lines" class="pcmenu ">产品</a>
                    <ul class="nav-two bk">
                        <li>
                            <a href="/products-line/TVS-Diodes.html">瞬态电压抑制器(TVS)</a>
                            <span class="glyphicon glyphicon-play "></span>
                            <ul class="nav-three bk">
                                <li>
                                    <a href="/products-line-list/DC-AC-TVS-Diodes">保护直流和交流线路的TVS管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/Leaded-TVS-Diodes">引线式瞬态抑制二极管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/Surface-Mount-TVS-Diodes">表面贴装型瞬态抑制二极管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/Automotive-TVS-Diodes">汽车用瞬态抑制二极管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/High-Stability-TVS-Diodes">高可靠性系列瞬态抑制二极管</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/products-line/ESD-Protection-Devices.html">单路和多路静电保护(ESD)</a>
                            <span class="glyphicon glyphicon-play "></span>
                            <ul class="nav-three bk">
                                <li>
                                    <a href="/products-line-list/SPE-ESD-Protection-Devices">超低电容系列单路静电抑制器</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/SME-ESD">SME系列单路保护静电抑制器</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/TVS-Diode-Arrays">SE系列瞬态抑制二极管阵列</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/products-line/Gas-Discharge-Tubes.html">陶瓷气体放电管(GDT)</a>
                            <span class="glyphicon glyphicon-play "></span>
                            <ul class="nav-three bk">
                                <li>
                                    <a href="/products-line-list/High-Surge-Gas-Tubes">大通流气体放电管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/Power-Gas-Tubes">适用于电源口防护的陶瓷放电管</a>
                                </li>
                                <li>
                                    <a href="/products-line-list/Signal-Gas-Tubes">适用于信号口防护的陶瓷放电管</a>
                                </li>
                            </ul>
                        </li>

                        <li>
                            <a href="/products-line/Zener.html">稳压二极管(Zener)</a>
                            <span class="glyphicon glyphicon-play "></span>
                            <ul class="nav-three bk">
                                <li>
                                    <a href="/products-line-list/Zeners">齐纳二极管</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="/products-line/MOSFET.html">小信号和功率MOSFET</a>
                            <span class="glyphicon glyphicon-play "></span>
                            <ul class="nav-three bk">
                                <li>
                                    <a href="/products-line-list/Signal-Mosfets">小信号Mosfets</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="/applications" class="pcmenu ">应用</a></li>
                <li><a href="/download/papers.html" class="pcmenu ">资源中心</a> </li>
                <li><a href="/support/support.html" class="pcmenu ">支持</a></li>
                <li><a href="/about/about-us.html" class="pcmenu ">关于</a> </li>
                <li><a href="/message" class="pcmenu ">联系我们</a>
                    <ul class="nav-two bk">
                        <li>
                            <a href="/sales">营业据点</a>
                        </li>
                        <li>
                            <a href="/message">在线咨询</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="nav-right">
            <span><a href="/" class="lang">中文</a><a href="/en" class="lang">EN</a></span>
            <a href="" class="btn-login lo" data-toggle="modal" data-target="#myModal2">登录</a>
            <a href="" class="btn-zhuce lo" data-toggle="modal" data-target="#myModal">注册</a>
        </div>
        <div class="clear"></div>
        <!-- 搜索 -->
        <div id="container">
            <div class="search bar2">
                <form class="index-form" method="post" enctype="multipart/form-data" action="/search">
                    <input type="text" name="keyword" autocomplete='off' placeholder="请输入您要搜索的内容..."
                        style="color:#fff;">
                    <button type="submit"><span class="glyphicon glyphicon-play "></span></button>
                </form>
            </div>
        </div>

        <!-- 二合一 -->
        <div class="row mar-top50">
            <div class="col-md-6">
                <div class="index-num2">
                    <a href=""><img src="http://www.bootfastui.cn/img/2020/1227/index1.png" width="100%" /></a>
                </div>
            </div>
            <div class="col-md-6">
                <div class="index-num2">
                    <a href=""><img src="http://www.bootfastui.cn/img/2020/1227/index2.png" width="100%" /></a>
                </div>
            </div>
        </div>
    </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');
        })
        $('.nav-two li').hover(function () {
            $(this).find('ul').stop().show();
        }, function () {
            $(this).find('ul').hide();
        })
    })
</script>