css - 将鼠标悬停在背景文本上时下拉菜单消失

Question

我无法在我正在开发的网站上使用主下拉菜单，因为如果你移动得太慢，或者如果你将鼠标悬停在它后面的子元素中背景中的文本上，它就会消失。

我试过添加 !important 标签。我试过寻找元素之间的任何差距。我试过调整 z 轴优先级值。

.dropdown {
        position: fixed;
        top: 1vmin;
        left: 1vmin;
        width: 10vmin;
        height: 10vmin;
        display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
        background color: black;
        color: black;
        border: none;
}
.dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 99999;
}
.dropdown-content a {
        color: black;
        padding: 10px 10px;
        text-decoration: none;
        display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
        position: fixed;
        top: 1vmin;
        width: calc(100vw - 14vmin);
        height: 10vmin;
        transform: translate(11vmin, 0vmin);
        text-align: center;
        padding: 0vmin;
        vertical-align: middle;
        dislpay: table-cell;
}
.header a {
        float: left;
        font-size: 4vmin;
        color: white;
        text-align: center;
        vertical-align: middle;
        padding: 1vmin 1vmin;
        text-decoration: none;
}
table {
        table-layout: auto;
        width: 100%;
        border: 1vmin solid black;
}
td {
        border: 1px solid black;
        overflow: hidden;
        text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
        width: 10vmin;
        height: 10vmin;
        position: relative:
        border: 0.5vmin solid #49b293;
        cursor: pointer;
        transition: all 0.3s ease;
}
.navbar div {
        height: 0.8vmin;
        width: 6vmin;
        background-color: #fff;
        position: absolute;
        transition: all 0.5s ease;
}
.navbar .first {
        top: 2.5vmin;
        left: 2vmin;
}
.navbar .second {
        top: 4.5vmin;
        left: 2vmin;
}
.navbar .third {
        top: 6.5vmin;
        left: 2vmin;
}
.navbar:hover .first {
        width: 4vmin;
        transform: translate(0vmin, 4.75vmin) rotate(50deg);
        transition: all 0.5s;
}
.navbar:hover .second {
        opacity: 0;
        transition: all 0.5s;
}
.navbar:hover .third {
        width: 4vmin;
        transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
        transition: all 0.5s;
}
.navbar:hover {
        border-radius:5vmin;
        transition: all 0.3s ease;
}
.mainbody {
        position: relative;
        width: 100%;
        top: 13vmin;
        z-index:1;
}
</style>
        <div class="dropdown" style="background-color:black;">
                <button class="dropbtn" style="background-color:black;">
                <div class="navbar">
                        <div class="first"></div>
                        <div class="second"></div>
                        <div class="third"></div>
                </div>
                </button>
                <div class="dropdown-content">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                </div>
        </div>
        <div class="header" style="background-color:black;">
<table style="background-color:black;">
        <tr>
        <td><a href="#">Home</a></td>
        <td><a href="#">IT</a></td>
        <td><a href="#">Science</a></td>
        <td><a href="#">Tech</a></td>
        <td><a href="#">News</a></td>
        <td><a href="#">Top</a></td>
        </tr>
        </table>
        </div>
        <div class="mainbody">
        <h1>RoyHQ</h1>
        </div>
</body>
</html>

我希望下拉菜单能够相对灵活地消失。不是，它几乎无法使用。

Answer 1

现在点击菜单!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
        position: fixed;
        top: 1vmin;
        left: 1vmin;
        width: 10vmin;
        height: 10vmin;
        display: inline-block;
}

.dropbtn {
        background color: black;
        color: black;
        border: none;
}
.dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 99999;
}
.dropdown-content a {
        color: black;
        padding: 10px 10px;
        text-decoration: none;
        display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
        position: fixed;
        top: 1vmin;
        width: calc(100vw - 14vmin);
        height: 10vmin;
        transform: translate(11vmin, 0vmin);
        text-align: center;
        padding: 0vmin;
        vertical-align: middle;
        dislpay: table-cell;
}
.header a {
        float: left;
        font-size: 4vmin;
        color: white;
        text-align: center;
        vertical-align: middle;
        padding: 1vmin 1vmin;
        text-decoration: none;
}
table {
        table-layout: auto;
        width: 100%;
        border: 1vmin solid black;
}
td {
        border: 1px solid black;
        overflow: hidden;
        text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
        width: 10vmin;
        height: 10vmin;
        position: relative:
        border: 0.5vmin solid #49b293;
        cursor: pointer;
        transition: all 0.3s ease;
}
.navbar div {
        height: 0.8vmin;
        width: 6vmin;
        background-color: #fff;
        position: absolute;
        transition: all 0.5s ease;
}
.navbar .first {
        top: 2.5vmin;
        left: 2vmin;
}
.navbar .second {
        top: 4.5vmin;
        left: 2vmin;
}
.navbar .third {
        top: 6.5vmin;
        left: 2vmin;
}
.navbar.active .first {
        width: 4vmin;
        transform: translate(0vmin, 4.75vmin) rotate(50deg);
        transition: all 0.5s;
}
.navbar.active .second {
        opacity: 0;
        transition: all 0.5s;
}
.navbar.active .third {
        width: 4vmin;
        transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
        transition: all 0.5s;
}
.navbar.active {
        border-radius:5vmin;
        transition: all 0.3s ease;
}
.mainbody {
        position: relative;
        width: 100%;
        top: 13vmin;
        z-index:1;
}
.dropdown-content.active {
    display: block;
}
</style>
        <div class="dropdownzzz" style="background-color:black;">
                <button class="dropbtn" style="background-color:black;" id="menu">
                <div class="navbar" id="iconmenu">
                        <div class="first"></div>
                        <div class="second"></div>
                        <div class="third"></div>
                </div>
                </button>
                <div class="dropdown-content" id="there">
                        <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                </div>
        </div>
        <div class="header" style="background-color:black;">
<table style="background-color:black;">
        <tr>
        <td><a href="#">Home</a></td>
        <td><a href="#">IT</a></td>
        <td><a href="#">Science</a></td>
        <td><a href="#">Tech</a></td>
        <td><a href="#">News</a></td>
        <td><a href="#">Top</a></td>
        </tr>
        </table>
        </div>
        <div class="mainbody">
        <h1>RoyHQ</h1>
        </div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>