悬停在特定页面上并在所有其他页面上工作时如何解决菜单消失问题？答案

【问题标题】：How to fix Menu disappear issue while hover on specific page and working on all other page?悬停在特定页面上并在所有其他页面上工作时如何解决菜单消失问题？
【发布时间】：2021-08-25 12:07:00
【问题描述】：

悬停在某些页面上起作用，而在某些页面上不起作用。菜单不能在主页上显示，并且在其余页面上工作正常。

网址无效：https://pcbmagic.com/

工作网址：https://pcbmagic.com/pcb-quote.php

.dropdown-log {
    position: relative;
    display: inline-block;
    margin-left: 26px;
    font-weight: 500;
    border: 1px solid rgb(111 111 111 / 65%);
    color: rgb(61, 79, 88);
    padding: 2px 10px 2px 13px;
    border-radius: 17px;
    font-size: 14px;
}
.dropdown-log:hover .dropdown-log-content {
    display: block;
}
.dropdown-log-content {
    display: none;
    position: absolute;
    padding: 0px 0px 10px 0;
    
    background-color: white;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
}

<div class="dropdown-log">
  <span>Hi,Vishal<i class="pl-2 fas fa-chevron-down"></i></span>
  <div class="dropdown-log-content">
  <div class="bg-dark py-2 mb-2">
        <div class="p-img">
            <svg style="height:30px;" fill="#21313C" viewBox="0 0 216.56 448.5" class="leafygreen-ui-1yq22vy"><path fill="#10aa50" d="M202.8,179.68c-23-101.47-71-128.49-83.18-147.59C113,21.7,106.25,5.91,106.25,5.91c-.66,9-1.83,14.7-9.51,21.54C81.36,41.16,16,94.42,10.51,209.72c-5.12,107.5,79,173.8,90.18,180.65,8.54,4.2,19,.08,24-3.77,40.54-27.84,96-102.07,78.06-206.92"></path><path fill="#b8c4c2" d="M109.73,333.11c-2.11,26.62-3.63,42.11-9,57.29,0,0,3.54,25.33,6,52.17l8.77,0a488.62,488.62,0,0,1,9.57-56.2C113.71,380.8,110.16,356.46,109.73,333.11Z"></path><path fill="#12924f" d="M125.06,386.39h0c-11.48-5.3-14.8-30.13-15.31-53.28A1090.8,1090.8,0,0,0,112.2,218.4c-.6-20.07.3-185.92-4.94-210.2,2.12,4.75,7.24,15.91,12.36,23.88,12.23,19.11,60.19,46.13,83.17,147.61C220.7,284.27,165.57,358.37,125.06,386.39Z"></path></svg>
        </div>
        <h6 class="text-center text-light">Vishal Vishwakarma</h6>
        <p class="text-center text-light" style="font-size:12px;">webadmin@championsemi.com</p>
    </div>
    <p><a href="/member/dashboard/">Dashboard</a></p>
    <p><a href="/member/dashboard/under-review.php">My Order</a></p>
    <p><a href="/member/dashboard/production.php">Production Status</a></p>
    <p><a href="#">Help Center</a></p>
    <p><a href="/member/dashboard/logout.php">Logout</a></p>
  </div>
</div>

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

.dropdown-log-content {
    display: none;
    position: absolute;
    padding: 0px 0px 10px 0;
    right: 0;
    background-color: white;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 99999999;
}

在您的代码中添加 z-index，它会自动修复。您的引导轮播与该菜单重叠。这就是为什么它没有得到控制的地区。

【讨论】：