React导航栏下拉菜单未垂直显示问题求助

问题分析 #

你的下拉菜单无法垂直排列，核心有三个问题：

1. CSS设置矛盾：你误以为给.nav ol设了display: block，但实际代码里是inline-block，这会让元素横向排列。
2. 列表结构错误：每个语言项单独套了一个<ol>，生成了多个独立的有序列表，而非一个包含所有选项的统一列表。
3. 父容器布局影响：导航栏的.nav ul和语言按钮的.nav h1都用了display: flex，下拉菜单容器继承了flex特性，导致内部元素横向排布。

修复方案 #

1. 修正Dropdown组件的列表结构

把所有语言项放在同一个<ol>中，避免生成多个独立列表：

// Dropdown.js
import React from 'react'
import {Languages} from './Languages'
import "./styles.css"

export default function Dropdown() {
    return(
        <ol className="language-dropdown">
            { Languages.map((item, index) => (
                <li key={index}>{item.title}</li>
            ))}
        </ol>
    );
};

2. 调整CSS样式

重置父容器的flex影响，给下拉菜单添加定位和垂直排列样式：

/* 修复导航栏h1的定位，作为下拉菜单的容器 */
.nav h1 {
    position: relative;
    cursor: pointer;
    margin: 0;
}

/* 下拉菜单核心样式 */
.language-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: decimal; /* 保留有序列表编号，不需要可设为none */
    background-color: #f1d221;
    color: rgb(64, 159, 55);
    width: 150px;
    display: block;
}

.language-dropdown li {
    padding: 10px;
}

.language-dropdown li:hover {
    background-color: rgba(0,0,0,0.1); /* 可选的hover高亮 */
}

/* 移除原有的.nav ol样式，确保导航栏ul的flex不影响下拉 */
.nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center;
}

3. 优化Navbar的交互逻辑（可选）

给语言按钮加外层容器，避免鼠标离开下拉菜单时立即隐藏：

// Navbar.js 中替换原h1部分
<div 
    onMouseEnter={onMouseEnter}  
    onMouseLeave={onMouseLeave}
>
    <h1>{language}</h1>
    {dropdown && <Dropdown />}
</div>

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