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

为了使两个导航菜单具有相同的宽度，可以采取以下几种方法：

使用CSS的flexbox布局：通过设置父容器的display属性为flex，然后设置子元素的flex属性为1，可以使两个导航菜单自动平分父容器的宽度。示例代码如下：

<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>

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

使用CSS的grid布局：通过设置父容器的display属性为grid，然后设置子元素的grid-column属性为1/2，可以使两个导航菜单自动平分父容器的宽度。示例代码如下：

<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>

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm

使用JavaScript动态计算宽度：通过JavaScript获取两个导航菜单的宽度，然后将宽度较小的菜单设置为与宽度较大的菜单相同的宽度。示例代码如下：

<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>

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm