CSS新手求助：复刻指定导航菜单并为:hover元素添加边框

嘿，作为CSS新手能做到这个进度已经超棒啦！针对你想给导航菜单hover状态添加边框的需求，我来帮你调整代码~

首先，直接在.topnav a:hover规则里添加边框属性就能实现效果，但要注意一个小问题：默认状态下元素没有边框，添加边框后可能会让导航项的尺寸突然变化，导致页面布局跳动。这里有两种常用的解决思路：

方法1：用透明默认边框避免布局跳动 #

给默认状态的导航链接添加透明边框，这样hover时只是替换边框颜色，不会改变元素的整体尺寸：

.menu { margin: 0; font-family: Arial, Helvetica, sans-serif; } 
.topnav { overflow: hidden; background-color: #2C4059; } 
.topnav a { 
  float: left; 
  color: white; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-size: 17px; 
  border: 2px solid transparent; /* 添加透明默认边框 */
} 
.topnav a:hover { 
  background-color: #D90D29; 
  border-color: #ffffff; /* 这里替换成你想要的边框颜色，比如白色 */
}

方法2：用box-sizing让边框包含在元素尺寸内 #

通过box-sizing: border-box属性，让边框的宽度被包含在元素的内边距和宽度之内，这样添加边框也不会改变元素的整体大小：

.menu { margin: 0; font-family: Arial, Helvetica, sans-serif; } 
.topnav { overflow: hidden; background-color: #2C4059; } 
.topnav a { 
  float: left; 
  color: white; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-size: 17px; 
  box-sizing: border-box; /* 让边框纳入元素尺寸计算 */
} 
.topnav a:hover { 
  background-color: #D90D29; 
  border: 2px solid #ffffff; /* 自定义边框宽度和颜色 */
}

可选：只给单边添加边框 #

如果目标网站的导航hover效果只是单边有边框（比如顶部或底部），可以用单边边框属性来实现，更贴合常见的导航设计：

.topnav a:hover { 
  background-color: #D90D29; 
  border-top: 3px solid #ffffff; /* 仅给顶部添加白色边框 */
}

你可以根据目标网站的实际样式，调整边框的宽度、颜色和位置哦~

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