如何让导航栏横跨整个页面？当前仅显示在右上角且hover效果失效

开发者阿泽

2026-10-7

导航栏横跨顶部修复

原因：nav元素未设置全宽属性，默认仅由内容撑开宽度。
修改nav的CSS规则：

nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    font-size: 16px;
    /* 新增规则 */
    width: 100%;
    padding: 10px 25px;
    box-sizing: border-box;
}

如果需要导航栏背景和右侧导航区域统一，可额外给nav加属性：background: rgb(129, 128, 199);

hover悬停效果修复

失效原因有3个：

::after伪元素的content属性后多写了逗号，属于语法错误，直接导致整段伪元素规则失效
下划线动画逻辑错误：默认状态未设置宽度为0，没有hover触发宽度变化的规则
hover时给a标签新增padding会导致布局跳动，且无实际作用

修改相关CSS规则：

.navbar ul li a{
    color:#fff;
    text-decoration: none;
    font-size: 18px;
    /* 新增padding，避免hover时布局跳动 */
    padding: 10px 25px;
}
.navbar ul li a:hover{
    background-color:rgb(116, 115, 180);
    /* 移除重复的字体、padding、position属性 */
}
.navbar ul li::after{
    width: 0; /* 默认隐藏下划线 */
    height:3px;
    background-color: #964800;
    position: absolute;
    left:0;
    bottom:0;
    z-index:1;
    transition: 0.5s;
    content: ''; /* 移除多余逗号 */
}
/* 新增hover触发下划线显示规则 */
.navbar ul li:hover::after{
    width: 100%;
}