尝试使两个导航菜单具有相同的宽度

<style>
    .container {
        display: flex;
    }
    .menu {
        flex: 1;
    }
</style>
<div class="container">
    <ul class="menu">
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
    </ul>
    <ul class="menu">
        <li>菜单项4</li>
        <li>菜单项5</li>
        <li>菜单项6</li>
    </ul>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .menu {
        grid-column: 1/2;
    }
</style>
<div class="container">
    <ul class="menu">
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
    </ul>
    <ul class="menu">
        <li>菜单项4</li>
        <li>菜单项5</li>
        <li>菜单项6</li>
    </ul>
</div>

<script>
    window.onload = function() {
        var menu1 = document.getElementById("menu1");
        var menu2 = document.getElementById("menu2");
        var maxWidth = Math.max(menu1.offsetWidth, menu2.offsetWidth);
        menu1.style.width = maxWidth + "px";
        menu2.style.width = maxWidth + "px";
    };
</script>
<ul id="menu1">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
</ul>
<ul id="menu2">
    <li>菜单项4</li>
    <li>菜单项5</li>
    <li>菜单项6</li>
</ul>