如何修复此下拉菜单显示问题

Question

这里的下拉菜单有问题：背景

问题是它没有显示我的子菜单的类别

Navbarsubitem.js:

import React from 'react'
function NavBarSubItem(props)
{
return(
<div className={props.subLi.liClassName}>
<a className={props.subLi.aClassName} href={props.subLi.href}> </a>
</div>
)
}
export default NavBarSubItem

Navbaritem.js:

import React from 'react'
import NavBarSubItem from './NavBarSubItem'
function NavBarItem(props)
{
function responsitiveMenu(){
var x = document.getElementById("idTopnav");
var y = document.getElementById("idIconItem");
if(x.className === "topNav") {
x.className += "-responsitive";
y.className = "fa fa-fw fa-reply"
}else{
x.className += "topnav";
y.className= "fa fa-fw fa-bar"      
}
}
const NavBarSubItems = props.li.subItems.map(item => <NavBarSubItem key={item.id} subLi={item}/>);
return(
<div className={props.li.liClassName}>
<a className={props.li.aClassName} href={props.li.href} onClick={props.li.liClassName === "responsitive-icon" ? responsitiveMenu : ""} ><i className={props.li.icon} id={(props.li.liClassName === "responsitive-icon") ? "idIconItem":""}></i>{props.li.text}</a>
<div className="dropDownItem-content">
{props.li.liClassName === "dropDownItem" ? NavBarSubItems: ""}
</div>
</div>
)
}
export default NavBarItem

Navbarblock.js:

import React from 'react'
import NavBarItem from './NavBarItem'
function NavBarBlock(props){
const navBaritems = props.block.navItems.map(item => <NavBarItem key={item.id} li={item}/>);
return(
<div className={props.block.id}>
{navBaritems}
</div>
)
}
export default NavBarBlock

Navbar.js:

import React from 'react'
import NavBarData from '../data/NavBarData'
import NavBarBlock from './NavBarBlock'
import './Nav.css'
class NavBar extends React.Component {
render (){
const navBarBlock = NavBarData.map(item=><NavBarBlock key={item.id} block={item}  
img={item.imgSrc}></NavBarBlock>) 
return (
<nav className='topNav' id='idTopNav'>
<h2>{navBarBlock}</h2>
</nav>
)
}
}
export default NavBar

最后我把我的如果你需要我的css代码，我会插入，我该如何解决这个问题？谢谢

Answer 1

当我想到下拉菜单时，我会想到这段代码和来自Always Sunny的经典Frank Reynolds‘Egg(只是一个起点！(

在我的导航栏组件内部渲染：

<div className="dropdown-content">
<a href="">Utility</a>
<a href="">Utility2</a>
<a href="">Utility3</a>
</div>

在我的导航栏.css 内

/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

使用此代码，您将获得一个基本的下拉菜单。有了它，您就可以应用所需的样式和功能。