导航栏Hover效果引发UI异常，如何保持UL尺寸仅修改LI样式？

问题出在你给hover状态的li新增了padding:5px，但默认状态下li没有这个内边距，导致hover时li的盒模型尺寸变大，进而撑动了外层的.links容器，让蓝色背景区域发生变化。要保持UL尺寸不变，核心是让li在hover前后的整体尺寸一致。

直接解决方案：给li设置默认padding，hover仅改背景色 #

修改CSS中li的样式，给默认状态的li加上和hover时相同的padding，hover时只修改背景色，这样元素尺寸不会发生变化：

/* 给默认状态的li设置padding，和hover时一致 */
nav .links li {
    padding: 5px;
    transition: all 0.2s ease;
}

/* hover时仅改变背景色，不修改padding */
nav .links li:hover {
    background: #000;
}

优化体验：让a标签填满li区域 #

为了让hover时整个li点击区域都有效果，建议给a标签设置display:block，并调整文字样式：

nav .links li a {
    display: block;
    color: #fff;
    text-decoration: none;
}

完整修改后的CSS片段 #

nav {
    width: 100%;
    height: 60px;
    max-width: 1200px;
    margin:  0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

li {
    list-style: none;
}

nav .logo a {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}

nav .links {
    display: flex;
    gap: 2rem;
    background: #00ABE4 ;
    padding: 10px 20px;
}

/* 新增默认li样式 */
nav .links li {
    padding: 5px;
    transition: all 0.2s ease;
}

/* 修改hover样式 */
nav .links li:hover {
    background: #000;
}

/* 新增a标签样式 */
nav .links li a {
    display: block;
    color: #fff;
    text-decoration: none;
}

nav .toggle-btn {
    color: #00ABE4 ;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.nav-btn {
    background: #00ABE4 ;
    color: #fff;
    padding:  0.5rem 1rem;
    border: none;
    outline: none;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: scale 0.2 ease-in-out;
}

.nav-btn:hover {
    scale: 1.05;
    color: #fff;
}

nav .nav-btn:active {
    scale: 0.95;
}

这样修改后，hover li时只会改变自身背景色，外层.links的蓝色背景区域尺寸完全不会变化，符合你的需求。

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