使用a标签创建可撑开下方内容的下拉菜单不生效如何解决

问题原因 #

• 下拉容器#dropDownCnt设置了position: absolute，脱离正常文档流，展开后不会占据父容器高度，自然没办法撑开下方内容
• 没有添加下拉菜单的触发规则（hover/点击事件），所以下拉容器一直保持display: none状态，不会显示
• 存在重复ID的问题：多个a标签用了同一个menuPage、portfolioPortraitID，ID在页面中必须唯一，建议改为class属性

修复方案 #

这里提供纯CSS的hover触发方案，不需要额外JS即可实现需求，修改后的代码如下：

HTML代码

<body>
    <div class="contents">
        <a class="menuPage" href="origami main.html#about">About</a>
        <div class="dropDown">
            <a class="dropDownPortfolio">Portfolio</a>
            <div class="dropDownCnt">
                <a class="portfolioItem" href="origami main.html#portraits">Portraits</a>
                <a class="portfolioItem" href="origami main.html#stationary">Stationary Cards</a>
            </div>
        </div>
        <a class="menuPage" href="">Video</a>
        <a class="menuPage" href="">Contact</a>
    </div>
</body>

CSS代码

<style>
a, .dropDown {
    color: #ff80d5;
    font-family: Gill Sans, sans-serif;
    text-decoration: none;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
    font-size: 25px;
}

.contents{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    /* 移除固定height限制，避免下拉内容溢出 */
}

.dropDownCnt{
    display: none;
    /* 删除position:absolute，保留在正常文档流中 */
}

/* 新增hover触发规则，鼠标悬浮到Portfolio区域时显示下拉内容 */
.dropDown:hover .dropDownCnt {
    display: block;
}

/* 可选：给下拉项单独设置样式区分层级 */
.portfolioItem {
    font-size: 20px;
}
</style>

关键修改说明 #

• 所有重复ID替换为class，符合HTML语法规范
• 移除.dropDownCnt的position:absolute属性，使其保留在正常文档流中，展开后自动占据高度，自然撑开下方的Video、Contact菜单项
• 替换.contents的固定高度、负margin定位方案，改用transform: translate(-50%, -50%)实现垂直水平居中，不会限制容器高度，适配下拉内容撑开后的高度变化
• 新增hover触发规则，鼠标悬浮到Portfolio区域时自动显示下拉菜单
• 若需要点击触发而不是hover触发，只需添加少量JS即可实现：给Portfolio的a标签绑定点击事件，切换.dropDownCnt的display属性即可

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