时间戳

首页 > 解决方案 > 如何让下拉菜单出现在div前面？

html - 如何让下拉菜单出现在div前面？

问题描述

嗨，我已经安排了我的顶部导航，左侧包含 3 个不同的按钮，中间包含一个长按钮，右侧包含一个 3 个点按钮。

3个点是一个下拉菜单。但是，我的下拉菜单似乎出现在 div 面板容器的后面。我阅读了许多在线解决方案，说是由溢出引起的：隐藏但是在我的情况下，我需要溢出：隐藏才能使左、中和右对齐起作用。但是，这会导致我的下拉菜单出现在后面。知道如何解决这个问题吗？下面是我的代码：

CSS：

    body {
      height: 100%;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      padding: 0;
      margin: 0;
    }

    .page-container {
      height: 80vh;
      margin-top: 10px  
    }

    .panel-container {
      display: flex;
      height: 100%;
      flex-direction: row;
      border: 2px solid #000;
      overflow: auto;
      xtouch-action: none;
    }

.....
....
/**********Alignment for top navigation*************/
    .topheader {
      margin-bottom:7px;
      width:100%;
    }

    .topright{
        width: auto;
        overflow:hidden;
        background-color:#1E90FF;
        color:#fff;
        font-weight:bold;
        font-size:19px;
        margin:3px;
        border-radius:7px;
        padding:5px;
        text-align:center;
    }

    .topleft{
        float:left;
        width:350px;
        padding:3px;
    }


    .nav-tab .nav-items {
      border-style: none;
      background-color:#1E90FF;
      font-weight:bold;
      font-size:12px;
      margin:1px;
      border-radius:5px;
      padding:5px;
    }

    .nav-tab .nav-link {
        color: #fff;
    }

    .threedots:after {
      content: '\2807';
      color: #fff;
       font-size:17px;
    }

HTML：

<div class="page-container">

            <div class="topheader">
                <div class="topleft">
                    <ul class="nav nav-tab" id="myTab" role="tablist">
                        <li class="nav-items">
                            <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one"
                            aria-selected="true">2019-01-01</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two"
                            aria-selected="false">2019-01-02</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three"
                            aria-selected="false">2019-01-03</a>
                        </li>

                    </ul>
                </div>

                <div class="topright">
                    <div class="row">
                        <div class="col-md-11">
                            Kelvin
                        </div>
                        <div class="col-md-1">
                                    <div class="dropdown">
                                      <button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
                                      <span class="caret"></span></button>
                                      <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="#">HTML</a></li>
                                        <li><a href="#">CSS</a></li>
                                        <li><a href="#">JavaScript</a></li>
                                      </ul>
                                    </div>

                        </div>
                    </div>
                </div>
            </div>

<div class="panel-container">

....
....
....

下面是隐藏下拉菜单的地方 下面是隐藏下拉菜单的地方

标签： htmlcss

解决方案

问题似乎是，您的菜单容器类topright已将属性设置overflow为hidden. 这导致下拉菜单中高于容器的部分被隐藏。如果您删除该overflow:hidden部分，下拉列表应显示正确。

推荐阅读