Question

我有两个导航栏，顶部导航栏有一个用于选择网站语言的下拉菜单，底部导航栏用于一般用途。我给了底部导航栏 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 属性？

下拉菜单隐藏在 React 的导航栏下

0 个答案: