Navbar下拉链接hover高亮无法占满100%宽度问题

问题描述 #

导航栏基础功能运行正常，此前鼠标悬浮导航链接时，链接区域会触发100%全宽高亮效果；调整部分代码后，悬浮链接无法实现全宽高亮。已尝试给ul、li、a标签及各层div容器设置100%宽度，均未生效，相关代码如下。

附：问题相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head></head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/ae0153af6c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/header.css" />
<script src="/javascripts/header.js"></script>
<title>Header</title>
</head>

<body>
    <div class="navbar-flexbox" id="navbar">

        <div class="hamburger">
            <span class="bar"> </span>
            <span class="bar"> </span>
            <span class="bar"> </span>
        </div>
        <div id="logo">
            <h1>The g<span class="title-span">oo</span>d Kitchen</h1>
        </div>

        <div class="search-wrapper">
            <form class="search-form" action="/recipes/search" method="POST">
                <div class="search-bar-container">
                    <label class="search-label" for="search"></label>
                    <input class="search-input" type="search" name="search" id="search" placeholder="What would you like to cook?">
                </div>
                <div class="search-icon-container">
                    <i class="search-icon fa-lg fa-solid fa-magnifying-glass"></i>
                </div>
                <div class="search-btn-container">
                    <input class="search-submit" type="submit" value="Search">
                </div>
            </form>
        </div>

        <div class="navigation-list-dropdown noDisplay">

            <div class="navbar-links">
                <ul>
                    <li><a href="/recipes/create">Upload a recipe</a></li>
                    <li><a href="/recipes/list">All recipes</a></li>
                    <li><a href="/">Home</a></li>
            </div>
            <% if(locals.islogged) { %>
                <div class="userLogged-links dropdown">
                    <button class="dropdown-btn">
                        <% if(locals.userLogged) { %>
                            <img class="user-image-miniature" src="../../images/userImages/<%=userLogged.image %>">
                            Hey user
                    </button>
                    <% } %>
                        <div class="dropdown-content navbar-links">
                            <li><a href="/user/profile">My profile</a></li>
                            <li><a href="/user/logout">Logout</a></li>
                        </div>
                </div>
                <% } else { %>
                    <div class="user-links dropdown navbar-links">
                        <li><a href="/user/login">Login</a></li>
                        <li><a href="/user/register">Register</a></li>
                    </div>
                    <% } %>

                        </ul>
        </div>
    </div>
</body>

</html>

CSS代码 #

* {
    box-sizing: border-box;
}

#navbar {
    background-color: rgb(47, 84, 88);
    position: fixed;
    width: 100%;
    z-index: 2;
}

.menu li {
    white-space: nowrap;
}

.navbar-links {
    width: 100% !important;
}


.navigation-list-dropdown ul {
    display: flex;
    flex-flow: wrap column;
    width: 100%;
}


.navigation-list-dropdown ul li {
    list-style: none;
}


.navigation-list-dropdown li a {
    padding: 1rem;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
}

.navigation-list-dropdown li:hover {
    background-color: #555;
}

.navigation-list-dropdown li:hover a {
    color: rgb(207, 181, 181);
}


.noDisplay {
    display: none;
}

.noVisible {
    visibility: hidden;
}


body i {
    color: black;
}


/* 汉堡菜单样式 */
.hamburger {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
}


.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg)
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg)
}



.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}


.navbar h1 {
    display: flex;
    justify-content: center;
}

.title-span {
    color: rgb(255, 255, 255) !important;
}

#logo h1 {
    font-family: Brush Script MT !important;
    position: relative;
    font-size: 1.7rem;
    margin: .5rem;
}

ul {
    margin: 0;
}




#navbar .hambMenu,
.login-register-container i,
#logo h1 {
    color: rgb(199, 176, 176);
}

.dropdown {
    float: left;
    overflow: initial;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;

}

.dropdown-btn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-btn {
    color: white !important;
    padding: 0px;
    display: flex;
    align-items: center;
}

.dropdown-btn>* {
    padding: 0px 5px;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


.dropdown:hover .dropdown-content {
    display: block;
}

.user-image-miniature {
    width: 35px;
    border-radius: 15px;
}

/* 用户导航链接样式结束 */



.navbar-flexbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;

}







/* 搜索栏样式 */
.search-input {
    font-size: 0.8rem !important;
    width: 100%;
    height: 35px;
    border: 1px solid rgb(188, 180, 180);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-align: center;
    position: relative;
}

.search-icon-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.search-icon {
    right: 5vw;
    position: absolute;
    z-index: 2;
    color: rgb(139, 147, 146);
    align-self: center;
}

.search-wrapper {
    width: 100%;
}

.search-form {
    display: flex;
    justify-content: space-evenly;
}

.search-label {
    display: none;
}

.search-bar-container {
    width: 100%;
}

.search-btn-container {
    display: none;

}

/* 搜索栏样式结束 */





@media (min-width:480px) {

    li {
        width: 20vw;
    }

    .hamburger {
        display: none;
    }

    .navbar-flexbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navigation-list-dropdown {
        display: initial;
    }

    .navigation-list-dropdown ul {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .navigation-list-dropdown ul {
        border-top: 3px solid rgb(144, 208, 221);
    }

    .user-links,
    .userLogged-links {
        display: flex !important;
        border-left: 0.1px solid rgb(144, 208, 221);
    }

    #logo h1 {
        font-size: 2rem;
    }
}

问题原因与修复方法 #

问题由3处代码错误共同导致，按优先级修复即可：

• HTML标签嵌套不规范：<ul>起始标签写在.navbar-links容器内，但闭合标签放在了所有导航区块最外层，中间的用户功能区块（登录/注册、个人中心下拉）直接插在<ul>内部，区块内的<li>脱离了正常列表结构，父级宽度无法正常传递。
  修复方法：调整HTML结构，将所有导航项统一放在同一个<ul>下，用户相关功能作为独立<li>嵌入列表，不要在<ul>中间穿插其他div容器。
• 浏览器默认列表样式未清除：浏览器默认给<ul>添加了40px的左侧内边距，现有代码只清除了ul的外边距margin:0，未清除内边距，导致列表内容无法撑满容器全宽。
  修复方法：给ul样式补充padding: 0属性。
• 列表项宽度未配置：移动端纵向布局下，未给.navigation-list-dropdown ul li设置width:100%，列表项会按内容宽度收缩，hover高亮自然无法覆盖全宽；同时桌面端媒体查询里写死了li {width:20vw}，无法随容器宽度自适应均分。
  修复方法：给.navigation-list-dropdown ul li添加width: 100%属性；删除媒体查询中li的固定宽度设置，改为flex: 1让列表项在横向布局时自动均分宽度。

额外规范问题：当前HTML中<head>标签重复，第一个<head></head>是空的闭合标签，后续meta、样式、脚本资源都写在了head标签外，不符合HTML语法规范，建议合并为单个head标签包裹所有头部资源。

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