二级导航

html

<style>
.header{height: 100px;background-color: var(--header-bg);}
.head_logo {width: 200px;height: auto;}
.fixed_top{position: fixed;top: 0;right: 0;left: 0;z-index: 1030;}
.navbar{position: relative;justify-content: space-between;}
.navbar_logo{display: inline-block;}
.navbar_collapse{flex-basis: auto;flex-grow: 1;}
.navbar_nav{margin-left: auto }
.nav_link{color: var(--white-color);padding: 14px 35px;display: inline-block;}
.nav_item_btn{margin-left: 10px;}
.nav_item.active .nav_link,
.nav_item .nav_link:hover,
.footer .lists a:hover,
.index_info_org{color: var(--orange-color);}
.menu_button{color: var(--white-color);}
.menu_button,.nav_menu_mobile,.slide_item,.goTop {display: none;}
.nav_menu_list{padding: 20px 0;}
.nav_menu_list li{float: left;}
.nav_menu_list li:not(:last-child){margin-right: 15px;}
.nav_menu_mobile.show{transform: translateY(0px);opacity: 1;pointer-events: all;}
.navbar_btn {padding: 4px 8px;border-radius: 4px;border: 1px solid;margin-right: 4px;}
.orange_btn,.white_btn:hover{color: var(--white-color);background-color: var(--orange-color);border-color: var(--orange-color);}
.orange_btn:hover,.white_btn{color: var(--orange-color);background-color: transparent;border-color: var(--orange-color);}
.nav_menu_link{width: 120px;padding: 10px 0;border-radius: 4px;margin-bottom: 5px;display: inline-block;color: var(--white-color);}
.nav_menu_link:hover,.nav_menu_link:focus,.menu_active{color: var(--white-color);background-color: var(--orange-color);}

</style>
<div class="container">
    <nav class="navbar">
        <a class="navbar_logo" title="logo" href="index.html"><img src="../images/logo.png" alt="logo"
                class="head_logo"></a>
        <div class="navbar_collapse">
            <ul class="navbar_nav">
                <li class="nav_item"><a class="nav_link" href="index.html">导航1</a></li>
                <li class="nav_item"><a class="nav_link" href="product.html">导航2</a></li>
                <li class="nav_item"><a class="nav_link" href="price.html">导航3</a></li>
                <li class="nav_item"><a class="nav_link" href="javascript:;">导航4</a></li>
            </ul>
        </div>
        <div class="menu_button">
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="square" stroke-linejoin="round">
                <line x1="3" y1="12" x2="21" y2="12"></line>
                <line x1="3" y1="6" x2="21" y2="6"></line>
                <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
        </div>
    </nav>
    <div class="nav_menu_mobile t_center" id="nav_menu_mobile">
        <a href="index.html" class="nav_link nav_menu_link">导航1</a>
        <a href="product.html" class="nav_link nav_menu_link">导航2</a>
        <a href="price.html" class="nav_link nav_menu_link">导航3</a>
        <a href="javascript:;" class="nav_link nav_menu_link">导航4</a>
    </div>
</div>
<script>
    var mobileNav = document.querySelector(".nav_menu_mobile");
    var btnNav = document.querySelector(".menu_button");
    btnNav.addEventListener("click", function () {
        mobileNav.classList.toggle("show");
    })
    $("#content ,#slide,#footer").on('click',function(){
        $('#nav_menu_mobile').removeClass("show")
    })
    // 导航菜单跳转时的选项高亮
    var links = $(".nav_link"),
        index = 0,
        // 跳转地址
        url = location.href.split("?")[0].split("/").pop();
    if (url) {
        for (var i = 0; i < links.length; i++) {
            if (links[i].href.indexOf(url) != -1) {
                index = i;
                break;
            }
        }
    } else {
        // 判空处理
        index = 0;
    }
    $(".nav_item").eq(index).addClass("active");
    $(".nav_menu_link").eq(index).addClass("menu_active");
</script>