html下拉菜单会影响下一行,CSS下拉菜单导致后续内容无法撑满页面

问题描述

初学CSS，打算做一个下拉菜单。目标结果是：

“下拉菜单”那个显示的就是一个下拉菜单。

但是如果在CSS中把下拉菜单周围的border去掉，内容部分就无法占满整行：

问题出现的环境背景及自己尝试过哪些方法

怀疑和.topnav中设置的overflow: hidden;属性有关，但是把这个属性去掉，下拉菜单就被隐藏了

相关代码

layout.html

* {

box-sizing: border-box;

}

body {

font-family: Arial, Helvetica, sans-serif;

padding: 10px;

background: #f1f1f1;

}

/* 头部标题 */

.header {

padding: 30px;

text-align: center;

background: white;

}

.header h1 {