CSS实现Flowers下拉菜单失效及下划线问题求助

问题1：下拉菜单鼠标悬停不显示 #

你的代码有两个核心问题：

• HTML结构错误：.dropdown-menu 没嵌套在「Flowers」对应的 <li> 标签内，导致无法通过父元素hover触发显示
• CSS触发逻辑错误：你写的是 .dropdown-menu li:hover 才显示，但菜单默认是display: none，根本hover不到子项

问题2：下划线效果失效 #

下划线伪元素加错了目标，你给.dropdown-menu加了::after，但应该给「Flowers」的<a>标签加；同时过渡时间语法错误，.10需要补全单位s。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
        overflow: hidden;
    }
    ::-webkit-scrollbar{
        display: none;
    }

    .wrapper {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 125px 1fr auto;
    }

    .navbar {
        grid-row: 1/2;
        background:  #F2E1D4;
        display: inline-block;
        position: relative;
    }
    .navbar li a {
        font-family: futura-pt-condensed, sans-serif;
        text-transform: uppercase;
        font-size: 1.2rem;
        letter-spacing: .08rem;    
        color: #4f271b;
        font-weight: 700;
        text-decoration: none;
    }
    .navbar img {
        float: left;
        padding-left: 2rem;
        max-width: 120px;
    }

    .main-nav li {
        display: inline-block;
        position: relative;
        list-style: none;
        float: left;
        padding-top: 4rem;
        padding-left: 2rem;
        padding-right: .75rem;
    }

    .main-nav li a {
        display: block;
    }

    /* 下拉菜单基础样式 */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%; /* 定位到父li下方 */
        left: 0;
        background: #F2E1D4; /* 继承导航栏背景色 */
        padding: 0;
        margin: 0;
        min-width: 180px; /* 给下拉菜单设置最小宽度 */
    }

    /* 父li hover时显示下拉菜单 */
    .main-nav li:hover .dropdown-menu {
        display: block;
    }

    /* 给Flowers的a标签加下划线效果 */
    .main-nav li.dropdown > a::after {
        margin-top: 2px;
        content: '';
        position: absolute;
        height: 4px;
        left: 2rem; /* 和父li的padding-left对齐 */
        bottom: 1rem; /* 调整下划线位置 */
        width: 0;
        background: lightgreen;
        transition: width 0.1s; /* 补全过渡单位 */
    }

    .main-nav li.dropdown:hover > a::after {
        width: calc(100% - 2.75rem); /* 减去左右padding的宽度 */
    }

    /* 下拉菜单项样式优化 */
    .dropdown-menu li {
        padding: 0.5rem 1rem;
        float: none; /* 取消浮动，让菜单项垂直排列 */
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="navbar">
        <a name="home"><img src="./images/MSW_Logo/MSW_LOGO_B_RGB.png"  alt="MorningStar Woollen logo" ></a>
        <ul class="main-nav">
            <li> <a href="https://morningstarwoollen.square.site/" target="_blank" rel="noopener noreferrer">Shop</a></li>
            <!-- 给Flowers的li加dropdown类，方便定位 -->
            <li class="dropdown"> 
                <a href="#">Flowers</a>
                <!-- 修正嵌套结构：把dropdown-menu放到Flowers的li里面 -->
                <ul class="dropdown-menu">
                    <li><a href="#">Weddings</a></li>
                    <li><a href="#">subscriptions</a></li>
                    <li><a href="#">seasonal</a></li>
                    <li><a href="#">custom</a></li>
                    <li><a href="#">growing practices</a></li>
                </ul>
            </li>
            <li> <a href="Workshops.html">Workshops</a></li>
            <li> <a href="Wool-Textile.html">Woollens</a></li>
            <li> <a href="https://morningstarwoollen.square.site/product/yarn/54?cp=true&sa=false&sbp=false&q=false&category_id=3">Yarn</a></li>
            <li> <a href="Farm.html">Farm</a></li>
            <li><a href="Connect.html">Contact</a></li>
            <li><a href="/#About-Us">About</a></li>
        </ul>
    </div>
</div>
</body>  
</html>

关键修改点说明 #

1. HTML结构修正：将.dropdown-menu嵌套在「Flowers」对应的<li>内，确保父元素hover可以触发子菜单显示
2. 下拉菜单触发逻辑：新增.main-nav li:hover .dropdown-menu { display: block; }，当鼠标悬停在Flowers的li上时，显示下拉菜单
3. 下划线效果修复：
   • 给Flowers的li添加.dropdown类，精准定位目标a标签
   • 将::after伪元素移到Flowers的a标签上，调整位置和宽度计算逻辑
   • 修正过渡时间语法，补全单位s
4. 下拉菜单样式优化：取消菜单项的浮动，设置背景色和最小宽度，让菜单布局更合理

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