【发布时间】：2020-01-12 00:11:13
【问题描述】：
我有一个 HTM 代码，我正在使用 CSS、jQuery Bootstrap 4。我试图在我的主菜单上悬停时创建一个下拉子菜单。出于某种原因，我无法让下拉子菜单工作。如果我将鼠标悬停在课程、教科书和汽车等主菜单上，我希望子菜单显示在主菜单下方。如果我也删除 bootstrap.min.css、announcement-container div 和 custom-menu-container div，它可以正常工作，如果 bootstrap 和其他菜单 div 存在，它就不起作用。我也真的需要引导程序和其他菜单。任何帮助如何让这个工作请。我正在使用 Bootstrap 4。对于主菜单和子菜单，我希望结果如下图所示。
下面是代码
:root {
--background-color: #FFF;
--button-bg: #FFF;
--secondary-bg-color: #F6F5FA;
--fontfamily: 'Ibarra Real Nova', serif;
--cormorant: 'Cormorant Garamond', serif;
}
* {
border: none !important;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
padding: 0;
margin: 0;
}
*:focus {
outline: 0;
}
textarea:focus, input:focus {
outline: none;
}
a {
text-decoration: none;
color: inherit;
}
/*-----------------------
/* New Css Added */
/*----------------------- */
.container-fluid.wrapper {
flex-direction: column;
padding-bottom: 0px;
}
.logo{
color: #000;
display: block;
height: 50px;
margin-right: 5px;
overflow: hidden;
padding-top: 0;
background-size: cover;
}
.announcement-container {
background: pink;
margin: 0;
padding: 5px 0 0 0;
font-size: 16px;
}
.announcement-container h5 {
font-size: 16px;
color: #FFF;
font-family: sans-serif;
}
.row.nav-container {
margin-top: 1rem;
}
.form-container,
.custome-menu {
text-align: center;
}
.col-md-6.form-container {
padding-right: 0px;
padding-top: 2px;
}
.search-product input {
border-bottom: 1px solid #000 !important;
min-width: 220px;
}
.col-md-6.form-container:hover .search-product input{
width: 300px;
}
.col-md-6.custome-menu {
word-spacing: .5rem;
padding-left: 0;
padding-top: 5px !important;
}
.text-center a {
color: #000;
}
.col-md-6.custome-menu .fa-a{
margin-left: .5rem;
}
/*----------------------------
/* Main menu and submenu */
/*---------------------------- */
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item {
color: #000;
text-decoration: none;
display: inline;
overflow: hidden;
}
.dropdown {
float: left;
}
.nav-item .dropdown-content {
background-color: red;
color: #000;
float: left;
position: absolute;
display: none;
z-index: 2;
left: 0;
top: 60px;
width: 100% !important;
}
.nav-item .dropdown-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.nav-item .dropdown-content a {
display: inline !important;
}
.nav-item:hover {
color: #FFF;
background: red !important;
}
.nav-item:hover a {
color: #FFF !important;
}
.navbar-nav li:hover .dropdown-content {
display: block;
}
.navbar-nav .dropdown-content a:hover {
text-decoration: underline;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.wrapper {
text-align: center;
justify-content: center;
background: #FFF;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="Lib/fontawesome-5/css/all.css">
<link rel="stylesheet" type="text/css" href="HTest.css">
</head>
<body>
<header>
<div class="container-fluid wrapper p-0">
<div class="row announcement-container">
<div class="col-md-12"><h5>Some text here</h5></div>
</div>
<div class="row nav-container">
<div class="col-md-4">
<a href="" class="logo">LOGO
</a>
</div>
<div class="col-md-8 custom-menu-container">
<div class="row">
<div class="col-md-6 form-container">
<form class="search-product" action="search" method="get" role="search">
<input type="text" name="s" id="search_value"
class="" placeholder="Enter keyword" autocomplete="off" value="">
<i class="fas fa-search" aria-hidden="true"></i>
</form>
</div>
<div class="col-md-6 custome-menu">
<a href="#" class="">Create Account</a> /
<a href="" class="">SignIn</a>
<a href="" class="fa-a"><i class="fas fa-shopping-bag" aria-hidden="true"></i></a>
<a href="" class="fa-a"><i class="fas fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<div class="dropdown">
<a class="nav-link" href="#">Course<span class="sr-only">(current)</span></a>
<div class="dropdown-content">
<a href="#">Web design</a>
<a href="#">Science</a>
<a href="#">Python</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TextBook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid">
<div class="col-md-12">
<p>Other text and content will be here</p>
</div>
</div>
</body>
</html>对于子菜单，我想要
【问题讨论】：
标签： javascript jquery html css bootstrap-4