Question

当我点击右键时，我正面临着我的css更新问题，我不知道为什么会发生这种情况，因为没有代码表明它会改变。当我在移动模式下点击我的超级导航时，它会奇怪地打开，但是当我右键单击它时它会打开它应该如何。这是一个显示问题的GIF

正如您在上图所示：当我点击并打开导航项时，它会将其打开覆盖在其他元素的顶部，但是当我右键单击时;它按预期工作。我试图强制重新流动许多不同的方式，但所有这些都不起作用。我也尝试调整大小但仍然没有，我试图触发一个上下文菜单;依然没有。

有没有人曾经遇到过这个？

的CSS

@media only screen and (max-width: 768px) {
    nav.mega-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 300;
        background-color: #324d4e;
        -webkit-transform: translateX(-120%);
        -moz-transform: translateX(-120%);
        -ms-transform: translateX(-120%);
        transform: translateX(-120%);
        max-width: 300px;
        -moz-box-shadow: 0 0 70px 0 rgba(0,0,0,0.32);
        box-shadow: 0 0 70px 0 rgba(0,0,0,0.32);
        color: #FFF;
        -moz-transition: all .2s ease;
        transition: all .2s ease
    }

    nav.mega-nav.slide {
        overflow-y: auto;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    nav.mega-nav .container {
        padding: 0
    }

    nav.mega-nav ul.top-level {
        display: none;
        width: 100%;
        position: absolute;
        background-color: #324d4e;
        overflow: hidden
    }

    nav.mega-nav ul.top-level.active {
        display: block
    }

    nav.mega-nav ul.top-level li {
        float: none;
        -webkit-flex: none;
        -moz-box-flex: 0;
        flex: none
    }

    nav.mega-nav ul.top-level li.top {
        text-align: left
    }

    nav.mega-nav ul.top-level li.top:nth-of-type(even) {
        background-color: #385657
    }

    nav.mega-nav ul.top-level li.top:nth-of-type(even).active {
        background-color: #568a8d;
    }

    nav.mega-nav ul.top-level li.top.active {
        background-color: #283c3c;
    }

    nav.mega-nav ul.top-level li.top.active:hover {
        /* background-color: #9ac738; */
        color: #345657 !important;
        background: #f5f5f5 !important;
    }

    nav.mega-nav ul.top-level li a {
        padding: 23px
    }

    nav.mega-nav ul.top-level li a:before {
        display: none
    }

    nav.mega-nav ul.top-level li:hover {
        background: none
    }

    nav.mega-nav ul.top-level li:hover .meganav-dropdown {
        display: none;
        opacity: 1;
        visibility: visible
    }

    nav.mega-nav ul.top-level li.active .meganav-dropdown {
        display: block;
        border-top: 0;
        background: white;
        margin-left: 0px !important;
        padding-left: 0px;
    }

    nav.mega-nav ul.top-level li .meganav-dropdown {
        position: relative;
        opacity: 1;
        visibility: visible;
        display: none;
        padding: 0
    }

    nav.mega-nav ul.top-level li .meganav-dropdown .container {
        padding: 0
    }

    nav.mega-nav ul.top-level li .meganav-dropdown ul {
        width: 100%;
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
        float: none;
        min-height: 0;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        align-items: stretch
    }

    nav.mega-nav ul.top-level li .meganav-dropdown ul li a {
        padding: 18px 23px
    }

    nav.mega-nav ul.top-level li .meganav-dropdown img {
        display: none
    }

    nav.mega-nav ul.top-level li .multi-level ul li {
        width: 100%;
        margin: 0
    }

    nav.mega-nav ul.top-level li .multi-level ul li:hover ul {
        display: none;
        opacity: 1;
        visibility: visible
    }

    nav.mega-nav ul.top-level li .multi-level ul li.active ul {
        display: block
    }

    nav.mega-nav ul.top-level li .multi-level ul li ul {
        position: relative;
        left: 0;
        background-color: #e0e0e0;
        padding: 0;
    }

    nav.mega-nav ul.top-level li .multi-level ul li ul.two-col {
        background-color: #6c8b27;
        width: 100%;
        padding: 0
    }

    nav.mega-nav ul.top-level li .multi-level ul li ul li:last-child {
        border-bottom: 0
    }
}

HTML

        <li class="top @isActiveSection" id="@Model.HealthAndWellbeingNav.headerText.Replace(" ", "-").Replace("&", "and")"
            onmouseover="hover(1, '@Model.HealthAndWellbeingNav.headerText.Replace("&", "and").Replace(" ", "-")');"
            onmouseout="unhover(1, '@Model.HealthAndWellbeingNav.headerText.Replace("&", "and").Replace(" ", "-")');">
            <a class="@isActiveSection">
                <i class="fa fa-globe" aria-hidden="true"></i>
                @Model.HealthAndWellbeingNav.headerText
            </a>
            <div class="meganav-dropdown multi-level" onmouseover="hoverNav(1)">
                <div class="container">
                    <ul class="trapScroll">
                        @foreach (var header in Model.HealthAndWellbeingNav.headerLinks)
                        {
                            <li>
                                <a>
                                    @header.link.name
                                </a>
                                <div class="dropdown-meganav-icon">
                                    <span class="fa fa-chevron-down" style="font-size:12px"></span>
                                </div>
                                @if (header.childLinks.Count > 6)
                                {
                                    <ul class="trapScroll">
                                        @foreach (var subLink in header.childLinks)
                                        {
                                            <li>
                                                <a href="@subLink.linkURL">
                                                    @subLink.name
                                                </a>
                                            </li>
                                        }
                                    </ul>
                                }
                                else
                                {
                                    <ul  class="trapScroll">
                                        @foreach (var subLink in header.childLinks)
                                        {
                                            <li>
                                                <a href="@subLink.linkURL">
                                                    @subLink.name
                                                </a>
                                            </li>
                                        }
                                    </ul>
                                }
                            </li>
                        }
                    </ul>
                </div>
            </div>
        </li>

的Javascript

<script>
    var components = [
        {
            hoverTimer: undefined,
            stopTimer: undefined
        },
        {
            hoverTimer: undefined,
            stopTimer: undefined
        },
        {
            hoverTimer: undefined,
            stopTimer: undefined
        },
        {
            hoverTimer: undefined,
            stopTimer: undefined
        },
        {
            hoverTimer: undefined,
            stopTimer: undefined
        },
        {
            hoverTimer: undefined,
            stopTimer: undefined
        }
    ];

    function unhover(index, element) {
        if ($(document).width() < 751) {
            return;
        }
        clearTimeout(components[index].hoverTimer);
        components[index].stopTimer = setTimeout(function () {
            document.getElementById(element).classList.remove('active');
        }, 600);
    }

    function hover(index, element) {
        if ($(document).width() < 751) {
            return;
        }
        clearTimeout(components[index].stopTimer);
        components[index].hoverTimer = setTimeout(function () {
            unactiveAll();
            document.getElementById(element).classList.add('active');
        }, 600);
    }

    function hoverNav(index) {
        if ($(document).width() < 751) {
            return;
        }
        clearTimeout(components[1].stopTimer);
    }

    function unactiveAll() {
        document.getElementById('Care-and-Support').classList.remove('active');
        document.getElementById('Health-and-Wellbeing').classList.remove('active');
        document.getElementById('Groups-and-Activities').classList.remove('active');
        document.getElementById('Local-Businesses').classList.remove('active');
        document.getElementById('Local-Guide').classList.remove('active');
        document.getElementById('Champions-Cinema').classList.remove('active');
    }
</script>

仅右键单击时更新Css

0 个答案: