下拉菜单垂直而不是水平显示（使用 React）。 我将 OL 设置为 display: block 但它仍然水平显示下拉菜单

Question

I have a navbar and i want there to be a dropdown menu when the user scrolls on English (the default language). The dropdown menu is in the Dropdown.js file and I made it an ordered list. The last item in my CSS file is the CSS is.nav ol and the display is set to block which should go vertically but instead the dropdown menu shows up horizontally.

Navbar.js

import React, { useState, useEffect } from 'react'
import { Link, useMatch, useResolvedPath } from "react-router-dom"
import { useTheme, useThemeLanguage } from './pages/Context'
import  Dropdown  from './Dropdown'

export default function Navbar() {
  const LOCAL_STORAGE_KEY = 's';
  const path = window.location.pathname;
  const loggedIn = useTheme();
  const language = useThemeLanguage();

  const [dropdown, setDropdown] = useState(false);
  const onMouseEnter = () => {   
      setDropdown(true);
    };

  const onMouseLeave = () => {   
      setDropdown(false);
    };


  
 

  function conversion(x) {
    if (x === false)
    {return false;}
    if (x === 'false')
    {return false}
    else return true

  }


 
  return (
    <>
  <nav className="nav">
    <Link to ="/" className="site-title">My Site</Link>
    <ul>
      <CustomLink to= "/pricing"> Pricing </CustomLink>
      <CustomLink to= "/about"> About </CustomLink>       
       
      { conversion(loggedIn) ? <CustomLink to= "/logout"> Logout </CustomLink> : <CustomLink to= "/login"> Login </CustomLink>   }
      <h1  onMouseEnter={onMouseEnter}  onMouseLeave={onMouseLeave}> {language}  {dropdown && <Dropdown />} </h1>
      
    </ul>
  
  </nav>
 
  </>
  )  
  
}


function CustomLink({ to, children, ...props }) {
  const resolvedPath = useResolvedPath(to)
  const isActive = useMatch({path: resolvedPath.pathname, end: true})

  return (
    <li className={ isActive ? "active" : ""}>
      <Link to = {to} {...props}>
        {children}
      </Link>

    </li>
  )
}

Dropdown.js

import React, { useState, useEffect } from 'react'
import {Languages} from './Languages'
import "./styles.css"

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

CSS

*{

    box-sizing:bor-box;
}

body {
    margin: 0
}

.container {
    margin: 1rem;
    text-align: center;
}

.nav {
    background-color: rgb(213, 67, 67);
    color: rgb(50, 200, 27);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem;
    font: italic;

}

.nav ul {
    padding:0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;

}

.nav a {
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: .25 rem;

}

.nav li.active {
    background-color: #b71d67
}


.nav li:hover {
    background-color: rgb(82, 38, 212)
}

.nav h1 {
    display:flex;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: rgb(11, 1, 1);
    padding: 10px;
    position: right;
    text-align: left;
  }

.uldropdown {
    display:block;

}

.nav ol {
    color:rgb(64, 159, 55);
    background-color: #f1d221;
    display: inline-block;
    width: 20%;
    font:700;
    padding: 10px;
}

Answer 1

if you insist on using flex ...

• you have to use flex-direction: column; in css .nav ul section
• otherwise flex will treat them as items to be in the row
• check flex docs
• consider not using display: flex everywhere (this example will work out of the box without flex)

 .nav ul { list-style: none; display: flex; /* magic happens here */ flex-direction: column; }

 <div class="nav"> <ul> <li> a </li> <li> b </li> <ul> </div>