如何让导航菜单触发按钮与下拉子导航面板尺寸一致

position: relative方案不生效的核心原因有两个：

• 代码中并没有给.subnav容器实际添加position: relative属性，内部设置了position: absolute的下拉面板找不到对应的定位父级，会向上查找直到最外层根元素，自然无法和按钮宽度对齐。
• 下拉面板.subnavcontent只设置了min-width: 100px，没有和父容器宽度做绑定，就算定位正确，宽度也不会自动匹配按钮尺寸。

仅需修改3处CSS即可实现效果：

1. 给.subnav添加position: relative，建立专属定位上下文，让内部下拉面板相对于该容器定位
2. 将.subnavcontent的min-width: 100px改为width: 100%，强制下拉面板宽度和父容器（即按钮所在容器）完全一致
3. 给.subnavcontent添加box-sizing: border-box，避免1px的红色边框把容器撑宽，导致和按钮宽度错位

<style>
        .navbar {
            background: #006669;
            overflow: hidden;
        }
        .navbar a{
            float: left;
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav{
            float: left;
            border:1px solid black;
            position: relative; /* 新增：建立定位上下文 */
        }
        .navbar .subnav .subnavbutton{
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            border: none;
            outline: none;
            background: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav .subnavcontent{
            position:absolute;
            border: 1px solid red;
            width: 100%; /* 替换原min-width:100px，宽度匹配父级 */
            box-sizing: border-box; /* 新增：边框不撑宽容器 */
            display: none;
        }
        .navbar .subnav .subnavcontent a{
            float: none;
            color: #444;
            background: white;
            display: block;

        }
        .navbar .subnav .subnavcontent a:hover{
            background: #a0a0a0;
        }
        .navbar .subnav:hover .subnavcontent{
            display: block;
        }

</style>

原有HTML部分不需要做任何修改，直接复用即可。

补充说明：后续如果调整按钮的内边距、字体大小，下拉面板会自动匹配按钮宽度，不需要额外修改尺寸参数。

内容的提问来源于stack exchange，提问作者Rahul Singh