CSS 使用 bootstrap 轮播时下拉菜单消失

Question

我有一个下拉导航菜单（使用来自 w3schools 的 css），在紧接着放置旋转木马之前工作正常。然后下拉列表不再显示，我不知道为什么。我是 css html 的新手 ..，所以我找不到问题的解决方案。我已经更改了多个类上的 Z-index 和位置，但并没有解决问题。每当我删除 bootstrap css link 时，下拉菜单就会再次起作用。你有什么建议吗？谢谢！

ps: 我把所有的代码都放上去了，抱歉，如果我添加的超过要求，这是我第一次发帖

/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.background-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), url("../img/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

.header-text {
  text-align: center;
  color: white;
  padding: 30px;
}


/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #1C8CE8;
  text-decoration: none;
  color: black;
}


/* Add an active class to highlight the current page */

.activenav {
  background-color: #4F47E1;
  color: white;
}


/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}


/* Dropdown container - needed to position the dropdown content */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Style the dropdown button to fit inside the topnav */

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}


/* Style the links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a dark background on topnav links and the dropdown button on hover */

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}


/* Add a grey background to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


/* Show the dropdown menu when the user moves the mouse over the dropdown button */

.dropdown:hover .dropdown-content {
  display: block;
}

.carousel {
  max-width: 100% !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.carousel-inner>.item>img {
  height: 600px!important;
  width: 100%;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

  <nav class="topnav" id="myTopnav">
    <a href="#home" class="activenav">Home</a>
    <div class="dropdown">
      <button class="dropbtn">Products 
            <i class="fa fa-caret-down"></i>
        </button>
      <div class="dropdown-content">
        <a href="#">Make</a>
        <a href="#">Model</a>
        <a href="#">Year</a>
      </div>
    </div>
    <a href="#news">News</a>
    <a href="#about">About</a>
    <a href="#contactus">Contact us</a>
    <a href="javascript:void(0);" class="icon" onclick="Functionnav()"><i class="fa fa-bars"></i></a>
  </nav>
  <section id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img/img1slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img2slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

      <div class="item">
        <img src="img/img3slideshow.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>title</h3>
          <p>paragraph</p>
        </div>
      </div>

    </div>

Answer 1

能否在轮播或下拉菜单中添加 z-index 的解决方案？

Answer 2

您完成了代码更改。如果您使用直接代码，它将起作用。

<!DOCTYPE html>
<html>
<head>
  <title></title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
  /* CSS Document */

 
</style>
</head>
<body>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Home</a>
    </div>
    <ul class="nav navbar-nav">
      
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#"> Make</a></li>
          <li><a href="#">Model</a></li>
          <li><a href="#">Year</a></li>
        </ul>
      </li>
      <li><a href="#">News</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://dummyimage.com/600x400/2ade48/fff" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="https://dummyimage.com/600x400/e02ae0/fff" alt="Chicago">
    </div>

    <div class="item">
      <img src="https://dummyimage.com/600x400/000/fff" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
   
</body>
</html>

Answer 3

菜单换行中 css 属性溢出问题。使用我下面的代码，希望能帮助到你

.dropdown {overflow: initial;}
.topnav {
   overflow: visible;
   width: 100%;
   height: 53px;
}

CSS 使用 bootstrap 轮播时下拉菜单消失

CSS dropdown menu disappears when using bootstrap carousel

html

css

carousel