Question

我尝试实现下拉菜单。好吧，将鼠标悬停在上面时，颜色会发生变化，但不会显示下拉菜单内容。我不知道我在哪里做错了。即使我尝试将宽度设置为100％，它仍然没有显示。此外，我还更改了位置。谁能帮助我解决此问题。

/* The dropup container */
.dropup{
  float: left;
  overflow: hidden;
  position: initial;
}

/* Add a red background color to navbar links on hover */
.application-container .image-container:hover, .dropup:hover {
  background-color: green;
}

/* Dropup content (hidden by default) */
.dropup-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  bottom:100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999999;
}

/* Mega Menu header, if needed */
.dropup-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.image-container:hover + .dropup .dropup-content{
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container application-container">
  <div class="row seven-rows">
    <div class="column text-center image-container">
      <img src="./images/aoe_icons_services_order_management.png" width='69' height='61' alt="e-commerce">
      <p class="mt-2 text-custom">E Commerce</p>
    </div>
    <div class="dropup">
      <div class="dropup-content">
        <div class="header">
          <h2>Mega Menu</h2>
        </div>
        <div class="row">
          <div class="col-lg-8">
            <h3>Category 1</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
          <div class="col-lg-4">
            <h3>Category 2</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 1

简单地修复在dropup-content的顶部添加缺少的样式

    .dropup-content {
top:50px;
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      bottom:100%;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 9999999;
    }

here is demo

在悬停巨型菜单上不显示

1 个答案: