我有两个导航栏,顶部导航栏有一个用于选择网站语言的下拉菜单,底部导航栏用于一般用途。
我给了底部导航栏 background-color: white;
,当我选择下拉菜单时,下拉菜单的内容被隐藏或隐藏在底部的后面。这是图像:
当我删除 background-color
的 CSS 属性时,我能够看到下拉内容,但内容位于底部导航栏后面,并没有像预期的那样在它前面重叠。这是图像:
这是我的底部导航栏代码:
import React from 'react';
import { Nav, Navbar, Form, Image, Container, InputGroup } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import logo from 'src/assets/vectors/logo.svg';
import accountIcon from 'src/assets/vectors/profileicon.svg';
import cartIcon from 'src/assets/vectors/carticon-empty.svg';
import searchIcon from 'src/assets/vectors/searchicon.svg';
import styled from 'styled-components';
const Navb = styled(Navbar)`
margin-top: 28px;
padding-top: 20px;
color: black;
background-color: white;
border-bottom-style: solid;
border-bottom-color: black;
border-bottom-width: 2px;
font-weight: 700;
`;
const NavigationBar = () => {
return (
<>
<Navb variant="light" fixed="top" expand="lg" className="pt-4 pb-4">
<Container>
<Navb.Brand href="/" className="d-none d-lg-block"><Image src={logo}></Image></Navb.Brand>
{/* some "mobile only" handling (burger menu, centered logo, search icon on the left, etc.) */}
<Navb.Toggle aria-controls="basic-navbar-nav" />
<Nav.Link as={Link} to="/" className="mr-auto d-lg-none ml-4"><Image src={searchIcon}></Image></Nav.Link>
<Navb.Brand href="/" className="mr-auto d-lg-none"><Image src={logo}></Image></Navb.Brand>
<Navb.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/" className="nav-2 ml-xl-4">Home</Nav.Link>
<Nav.Link className="nav-2 ml-xl-4">Shop</Nav.Link>
<Nav.Link className="nav-2 ml-xl-4">Sale</Nav.Link>
</Nav>
<Form inline className="d-none d-lg-block mr-4 search-control">
<InputGroup>
<Form.Control type="text" placeholder="Search" aria-describedby="inputGroupPrepend"
/>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend"><Image src={searchIcon} ></Image></InputGroup.Text>
</InputGroup.Prepend>
</InputGroup>
</Form>
</Navb.Collapse>
<Nav.Link as={Link} to="/"><Image src={accountIcon}></Image></Nav.Link>
<Nav.Link as={Link} to="/cart" className="pr-0"><Image src={cartIcon}></Image></Nav.Link>
</Container>
</Navb>
</>
);
}
导出默认导航栏;
这是顶级语言切换导航栏:
import React from "react";
import { NavDropdown, Navbar, Container } from 'react-bootstrap';
import Flex from "./flex";
export type eventKey = string | null;
const LanguageNav = () => {
const [language, setLanguage] = React.useState<eventKey>("DE");
const [currency, setCurrency] = React.useState<eventKey>("€ EUR");
const handleLanguageChange = React.useCallback((eventKey: eventKey) => {
setLanguage(eventKey);
if(eventKey == "DE")
setCurrency("€ EUR");
else if(eventKey == "JP")
setCurrency("¥ JPY");
else if(eventKey == "US")
setCurrency("$ USD");
else
setCurrency("£ GBP");
}, []);
const handleCurrencyChange = React.useCallback((eventKey: eventKey) => {
setCurrency(eventKey);
if(eventKey == "€ EUR")
setLanguage("DE");
else if(eventKey == "¥ JPY")
setLanguage("JP");
else if(eventKey == "$ USD")
setLanguage("US");
else
setLanguage("UK");
}, []);
return (
<>
<Navbar className="navbar-top" fixed="top">
<Container>
<Flex justify="flex-end" padding="0 20px 0 0">
<NavDropdown
onSelect={handleLanguageChange}
alignRight
title={language}
id="basic-nav-dropdown"
>
<NavDropdown.Item eventKey="US">US</NavDropdown.Item>
<NavDropdown.Item eventKey="UK">UK</NavDropdown.Item>
<NavDropdown.Item eventKey="DE">DE</NavDropdown.Item>
<NavDropdown.Item eventKey="JP">JP</NavDropdown.Item>
</NavDropdown>
<NavDropdown
onSelect={handleCurrencyChange}
alignRight
title={currency}
id="basic-nav-dropdown"
>
<NavDropdown.Item eventKey="€ EUR">€ EUR</NavDropdown.Item>
<NavDropdown.Item eventKey="£ GBP">£ GBP</NavDropdown.Item>
<NavDropdown.Item eventKey="¥ JPY">¥ JPY</NavDropdown.Item>
<NavDropdown.Item eventKey="$ USD">$ USD</NavDropdown.Item>
</NavDropdown>
</Flex>
</Container>
</Navbar>
</>
);
};
export default LanguageNav;
我在这里遗漏了什么吗?任何需要处理的 CSS 属性?