一、html部分

<header id="header" class="header">

    <div class="nav-box">

    <div class="logo">

    <img src="./images/logo.png" alt="">

    </div>

    <nav>

    <ul>

    <li><a href="#" class="current">首页 </a></li>

    <li><a href="#" class="submenu">关于我们</a>

    <ol>

    <li><a href="#">公司简介</a></li>

    <li><a href="#">企业文化</a></li>

    </ol>

    </li>

    <li><a href="#" class="submenu">产品中心</a>

    <ol>

    <li><a href="#">金瑞单片机</a></li>

    <li><a href="#">手势识别模组</a></li>

    </ol>

    </li>

    <li><a href="#">应用方案</a></li>

    <li><a href="#">服务与支持</a></li>

    <li><a href="#">新闻资讯</a></li>

    <li><a href="#">联系我们</a></li>

    </ul>

    </nav>

    <div class="lang">

    语言

    <div class="sub-lang">

    <p><a>English</a></p>

    <p><a>简体中文</a></p>

    </div>

    </div>

    </div>

</header>

二、CSS部分

.header {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100px;

background-color: rgb(252, 252, 252);

z-index: 99;

border-bottom: 1px solid #ddd;

}

.header.scrolled {

background: rgba(35, 198, 217, .5);

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

}

.nav-box {

width: 1200px;

height: 100px;

margin: 0 auto;

display: flex;

/* justify-content: space-between; */

align-items: center;

}

.nav-box .logo {

width: 200px;

height: 80px;

margin-right: 30px;   /*不使用justify-content: space-between;*/

}

.nav-box .logo img {

width: 100%;

height: 100%;

}

.nav-box nav {

margin-right: auto;   /*不使用justify-content: space-between;*/

}

.nav-box nav ul {

display: flex;

}

.nav-box nav ul>li {

width: 100px;

text-align: center;

height: 44px;

line-height: 44px;

position: relative;

margin-left: 15px;

}

.nav-box nav ul li a {

color: #333;

padding-bottom: 10px;

position: relative;

}

.nav-box nav ul li>a:hover {

color: #ff8400;

border-bottom: 2px solid #ff8400;

}

.current {

color: #ff8400;

border-bottom: 2px solid #ff8400;

}

.nav-box nav ul li ol {

display: none;

position: absolute;

background-color: #fff;

/*下面3行保证水平居中*/

left: 50%;

width: 100%;

transform: translateX(-50%);

z-index: 999;

/*确保二级菜单在上面*/

}

.nav-box nav ul li:hover ol {

display: block;

}

.nav-box nav ul li ol li:hover {

background-color: #f3f3f3;

}

.nav-box nav ul li ol li:hover a {

color: #ff8400;

border-bottom: none;

}

.submenu::after {

content: "";

width: 5px;

height: 5px;

border-bottom: 1px solid #333;

border-right: 1px solid #333;

position: absolute;

right: -15px;

top: 5px;

transform: rotate(45deg);

transition: all 0.3s;

}

.nav-box nav ul li:hover .submenu::after {

transform: rotate(225deg);

}

.header .lang {

position: relative;

padding-right: 15px;

}

.header .lang::after {

content: "▼";

position: absolute;

right: 0px;

top: 5px;

font-size: 12px;

}

.lang .sub-lang {

display: none;

position: absolute;

background-color: #fff;

left: 50%;

width: 100%;

transform: translateX(-50%);

z-index: 999;

}

.lang:hover .sub-lang {

display: block;

width: 100px;

text-align: center;

}

.lang:hover .sub-lang p {

height: 44px;

line-height: 44px;

}

.lang:hover .sub-lang p a {

cursor: pointer;

}

.lang:hover .sub-lang p a:hover {

color: #ff8400;

}

.main {

width: 1200px;

height: 2000px;

margin: 0 auto;

margin-top: 100px;

background-color: aliceblue;

}

三、JavaScript部分

<script>

// 滚动时改变header样式

window.addEventListener('scroll', function() {

const header = document.getElementById('header'); //通过id获取到导航栏

if (window.scrollY > 50) {

header.classList.add('scrolled'); //滚动超过50px，添加scrolled样式

} else {

header.classList.remove('scrolled'); //移除scrolled样式

}

});

</script>