我想让正常大小的浏览器链接变成移动大小的菜单下拉框？

Question

import React from "react";
import { Link } from "react-router-dom";

function Header(){
    return(
        <>
         <h1 className="title">Ability Meals</h1>
        <nav style={{margin:10}}>
            <Link to="/" style={{ padding: 5 }}>Home</Link>
            <Link to="protein" style={{ padding: 5 }}>Protein</Link>
            <Link to="recipe" style={{ padding: 5 }}>Recipe</Link>
            <Link to="random" style={{ padding: 5 }}>Random</Link>

        </nav>
        </>
    )
};

export default Header;