Question

Hello Stackers，

我现在感觉很吵，但我似乎无法在按钮下面找到正确的“下拉”。当我将鼠标悬停在按钮“ONE”上时，我只想在那里显示正确的下拉菜单。然而，它们都在徘徊时出现。我不能真正提供HTML，因为它使用的是CONTAO Cms。

CSS

#header nav.mod_navigation.main ul.level_2 li a:hover {
    background-color:#f9f301;
    color:#ffffff;
}

#header nav.mod_navigation.main ul.level_2 li a {
    background:#ffffff !important;
    color:#000000 !important;
    width:100%;
    border-radius:0px;
    margin-right:0px !important;
}

#header nav.mod_navigation.main ul.level_2 li {
    background-color:#ffffff !important;
    color:#000000 !important;
    width:100%;
    border-bottom:1px dashed #000000;
    border-radius:0px;
    padding:0px;
}

#header nav.mod_navigation.main > ul:hover .level_2 {
    display:block;
}

#header nav.mod_navigation.main ul.level_2 {
    top:170px;
        position:absolute;
        overflow:visible;
        display:none;
        margin:0;
        padding:0;
        background-color:#fff;
        z-index:1000;
    max-width:170px;
}

HTML

对于HTML，您可以访问JSFiddle，因为它很长：https://jsfiddle.net/p9y21cee/

我做错了什么？

Answer 1

改变这个：

#header nav.mod_navigation.main > ul:hover .level_2 {}

为：

#header nav.mod_navigation.main li:hover .level_2 {}

#header nav.mod_navigation.main ul.level_2 li a:hover {
    background-color:#f9f301;
    color:#ffffff;
}

#header nav.mod_navigation.main ul.level_2 li a {
    background:#ffffff !important;
    color:#000000 !important;
    width:100%;
    border-radius:0px;
    margin-right:0px !important;
}

#header nav.mod_navigation.main ul.level_2 li {
    background-color:#ffffff !important;
    color:#000000 !important;
    width:100%;
    border-bottom:1px dashed #000000;
    border-radius:0px;
    padding:0px;
}

#header nav.mod_navigation.main li:hover .level_2 {
    display:block;
}

#header nav.mod_navigation.main ul.level_2 {
    top:170px;
        position:absolute;
        overflow:visible;
        display:none;
        margin:0;
        padding:0;
        background-color:#fff;
        z-index:1000;
    max-width:170px;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <header id="header">
        <div class="inside">
            <div class="kopfleiste">
                <h1 class="logo"><a href=
                ""><img alt=
                "" src=
                ""></a></h1>
                
            </div>
            <div class="open-close" id="btnmenu">
                Menü
            </div>
            <div id="mobile-navi" style="display: none;">
                <!-- indexer::stop -->
                <nav class="mod_navigation block">
                    <a class="invisible" href=
                    "privat-gewerblich.html#skipNavigation15">Navigation
                    überspringen</a>
                    <ul class="level_1" role="menubar">
                        <li class="first">
                            <a class="first" href="home-17.html" role=
                            "menuitem" title="">Home</a>
                        </li>
                        <li>
                            <a href="elektrotechnik.html" role="menuitem"
                            title="Leistungen">Leistungen</a>
                        </li>
                        <li class="submenu trail">
                            <a aria-haspopup="true" class="submenu trail" href=
                            "industrieelektrik.html" role="menuitem" title=
                            "Referenzen">Referenzen</a>
                            <ul class="level_2" role="menu">
                                <li class="sibling first">
                                    <a class="sibling first" href=
                                    "industrieelektrik.html" role="menuitem"
                                    title=
                                    "Industrieelektrik">Industrieelektrik</a>
                                </li>
                                <li class="active"><span class="active" role=
                                "menuitem">Privat / Gewerblich</span></li>
                                <li class="sibling last">
                                    <a class="sibling last" href=
                                    "marktanschluesse.html" role="menuitem"
                                    title="Marktanschlüsse">Marktanschlüsse</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="ueber-uns-20.html" role="menuitem" title=
                            "Über Uns">Über Uns</a>
                        </li>
                        <li>
                            <a href="downloads.html" role="menuitem" title=
                            "Downloads">Downloads</a>
                        </li>
                        <li>
                            <a href="21.html" role="menuitem" title=
                            "Kontakt">Kontakt</a>
                        </li>
                        <li class="last">
                            <a class="last" href="jobs-24.html" role="menuitem"
                            title="Jobs">Jobs</a>
                        </li>
                    </ul><a class="invisible" id="skipNavigation15">&nbsp;</a>
                </nav><!-- indexer::continue -->
            </div><!-- indexer::stop -->
            <nav class="mod_navigation main block">
                <a class="invisible" href=
                "privat-gewerblich.html#skipNavigation14">Navigation
                überspringen</a>
                <ul class="level_1" role="menubar">
                    <li class="first">
                        <a class="first" href="home-17.html" role="menuitem"
                        title="">Home</a>
                    </li>
                    <li class="submenu">
                        <a aria-haspopup="true" class="submenu" href=
                        "elektrotechnik.html" role="menuitem" title=
                        "Leistungen">Leistungen</a>
                        <ul class="level_2" role="menu">
                            <li class="first">
                                <a class="first" href="elektrotechnik.html"
                                role="menuitem" title=
                                "Elektrotechnik">Elektrotechnik</a>
                            </li>
                            <li>
                                <a href="industrieservice.html" role="menuitem"
                                title="Industrieservice">Industrieservice</a>
                            </li>
                            <li>
                                <a href="photovoltaik.html" role="menuitem"
                                title="Photovoltaik">Photovoltaik</a>
                            </li>
                            <li>
                                <a href="waermepumpen.html" role="menuitem"
                                title="Wärmepumpen">Wärmepumpen</a>
                            </li>
                            <li>
                                <a href="marktanschluesse-32.html" role=
                                "menuitem" title=
                                "Marktanschlüsse">Marktanschlüsse</a>
                            </li>
                            <li>
                                <a href="service.html" role="menuitem" title=
                                "Service">Service</a>
                            </li>
                            <li>
                                <a href="planungsbuero.html" role="menuitem"
                                title="Planungsbüro">Planungsbüro</a>
                            </li>
                            <li class="last">
                                <a class="last" href="vermietung.html" role=
                                "menuitem" title="Vermietung">Vermietung</a>
                            </li>
                        </ul>
                    </li>
                    <li class="submenu trail">
                        <a aria-haspopup="true" class="submenu trail" href=
                        "industrieelektrik.html" role="menuitem" title=
                        "Referenzen">Referenzen</a>
                        <ul class="level_2" role="menu">
                            <li class="sibling first">
                                <a class="sibling first" href=
                                "industrieelektrik.html" role="menuitem" title=
                                "Industrieelektrik">Industrieelektrik</a>
                            </li>
                            <li class="active"><span class="active" role=
                            "menuitem">Privat / Gewerblich</span></li>
                            <li class="sibling last">
                                <a class="sibling last" href=
                                "marktanschluesse.html" role="menuitem" title=
                                "Marktanschlüsse">Marktanschlüsse</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="ueber-uns-20.html" role="menuitem" title=
                        "Über Uns">Über Uns</a>
                    </li>
                    <li>
                        <a href="downloads.html" role="menuitem" title=
                        "Downloads">Downloads</a>
                    </li>
                    <li>
                        <a href="21.html" role="menuitem" title=
                        "Kontakt">Kontakt</a>
                    </li>
                    <li class="last">
                        <a class="last" href="jobs-24.html" role="menuitem"
                        title="Jobs">Jobs</a>
                    </li>
                </ul><a class="invisible" id="skipNavigation14">&nbsp;</a>
            </nav><!-- indexer::continue -->
            <div class="mod_article first last block" id="article-56">
                <div class=
                "mod_rocksolid_slider first last block rsts-main rsts-direction-x rsts-type-slide rsts-skin-light rsts-no-touch"
                style="">
                    <div class="rsts-view" style="">
                        <div class="rsts-crop" style=
                        "width: 1000px; height: 440px; transform: translateZ(0px);">
                        <div class="rsts-slides" style=
                        "transform: translate3d(0px, 0px, 0px);">
                                <div class=
                                "rsts-slide rsts-slide-image rsts-active"
                                style="width: 1000px; transform: translate3d(0px, 0px, 0px); top: 0px;">
                                <div data-rsts-type="image"><img alt=""
                                    height="440" src=
                                    ""
                                    style=
                                    "display: block; width: 1000px; height: 440px; min-width: 0px; min-height: 0px; max-width: none; max-height: none; margin-top: 0px; margin-left: 0px;"
                                    width="1000"></div>
                                </div>
                            </div>
                        </div><a class="rsts-prev" href="" style=
                        "display: none;">prev</a><a class="rsts-next" href=""
                        style="display: none;">next</a>
                    </div>
                </div>
                <div id="shadow" style="clear:both;"><img src=
                "files/Theessen/Basic/Shadow-Slider.png"></div>
                <script>
                (function($){var slider=$('.mod_rocksolid_slider').last();slider.find('video[data-rsts-background],[data-rsts-type=video]video').each(function(){this.player=false;});slider.rstSlider({"type":"slide","skin":"light","width":"css","height":"css","navType":"none","scaleMode":"fit","imagePosition":"center","random":false,"loop":false,"videoAutoplay":false,"autoplayProgress":true,"pauseAutoplayOnHover":false,"keyboard":true,"captions":true,"controls":true,"combineNavItems":true,"gapSize":"0%"});$(function(){if (!$.fn.colorbox){return;}var lightboxConfig={loop: false,rel: function(){return $(this).attr('data-lightbox');},maxWidth: '95%',maxHeight: '95%'};var update=function(links){links.colorbox(lightboxConfig);};slider.on('rsts-slidestop',function(event){update(slider.find('a[data-lightbox]'));});update(slider.find('a[data-lightbox]'));});})(jQuery);
                </script>
            </div>
        </div>
    </header>
</body>
</html>

你所拥有的是：当你悬停主要ul时显示等级2，你想要的是：当主要ul中的li被悬停时显示等级2。

HTML下拉菜单：仅选择菜单

1 个答案: