如何用HTML构建带悬停下拉菜单的交互式导航栏？

修正后的HTML结构（含下拉菜单与表单示例） #

你的现有HTML存在一个小问题：<a>标签的文本内容放在了标签外部，导致点击文字无法触发链接，需要把文本移到<a>内部。另外，要在下拉菜单中加入表单，直接在下拉容器里添加<form>元素即可。以下是优化后的完整结构：

<header>
    <nav>
        <img src="img/logo.png" alt="Brand Name" title="Brand Name" width="250" loading="lazy">
        <ul class="main-nav">
            <!-- 新品导航项（带下拉菜单） -->
            <li class="nav-item">
                <a href="#" class="nav-trigger">NUOVI ARRIVI</a>
                <div class="dropdown">
                    <ul class="dropdown-links">
                        <li><a href="https://link.com">Coats</a></li>
                        <li><a href="https://link.com">Shoes</a></li>
                        <li><a href="https://link.com">Belts</a></li>
                        <li><a href="https://link.com">Sweaters</a></li>
                        <li><a href="https://link.com">Jewelry</a></li>
                    </ul>
                    <!-- 下拉菜单中的表单示例 -->
                    <form class="dropdown-form" action="#" method="get">
                        <label for="search">搜索商品：</label>
                        <input type="text" id="search" name="q" placeholder="输入关键词">
                        <button type="submit">搜索</button>
                    </form>
                </div>
            </li>

            <!-- 其他导航项（复用相同结构） -->
            <li class="nav-item">
                <a href="#" class="nav-trigger">COLLEZIONI</a>
                <div class="dropdown">
                    <!-- 这里可以放其他链接或表单 -->
                </div>
            </li>
        </ul>
    </nav>
</header>

关键结构说明 #

• 语义化标签使用：用<header>包裹导航栏，<nav>明确导航区域，<ul>/<li>构建列表式导航，符合HTML语义规范。
• 下拉触发元素：用<a>标签替代<div>作为导航触发点，更符合交互逻辑（即使链接是#，也比div更适合作为可点击元素）。
• 通用容器设计：每个下拉菜单放在统一的.dropdown类容器中，方便CSS统一控制，避免为每个导航项写单独样式。
• 表单集成：直接在.dropdown内部添加<form>元素，即可实现下拉菜单中的表单功能，无需额外结构调整。

通用CSS实现（无需为每个导航项写单独样式） #

你从W3找到的CSS可以优化为通用类，让所有导航项都能复用，减少重复代码：

/* 主导航列表：横向排列 */
.main-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

/* 导航项容器：相对定位用于放置下拉菜单 */
.nav-item {
    position: relative;
    margin: 0 15px;
}

/* 导航触发链接样式 */
.nav-trigger {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #000;
}

/* 下拉菜单：默认隐藏，绝对定位在导航项下方 */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    padding: 15px;
    z-index: 100;
}

/* 鼠标悬停时显示下拉菜单 */
.nav-item:hover .dropdown {
    display: block;
}

/* 下拉链接样式 */
.dropdown-links {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.dropdown-links li {
    margin: 8px 0;
}

.dropdown-links a {
    text-decoration: none;
    color: #000;
}

.dropdown-links a:hover {
    background-color: #f0f0f0;
    padding: 4px;
    display: block;
}

/* 下拉表单样式 */
.dropdown-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dropdown-form input {
    padding: 4px;
    flex: 1;
}

注意事项 #

• 要实现鼠标悬停显示下拉的交互效果，CSS是必不可少的——HTML负责结构，CSS负责样式和交互触发。
• 通用类的写法能大幅减少重复代码，后续添加新的导航项时，只需复制.nav-item的结构即可，无需修改CSS。

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