Pascal Boschma Pascal Boschma - 3 months ago 8
CSS Question

HTML Dropdown Menu: Only selected menu

Hello Stackers,

I'm feeling very noobish right now, but I can't seem to get the right "drop down" underneath a button. When I hover over the Button "ONE", I only want the correct Dropdown menu showing up there. However, They all show up when hovering.
I can't really provide the HTML since it's using CONTAO Cms.

The 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

For the HTML you can visit JSFiddle, since it's pretty long: https://jsfiddle.net/p9y21cee/

What am I doing wrong?

Answer

Change this:

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

to:

#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>

What you had was: show level 2 when you hover the main ul, what you wanted is: show level 2 when an li inside the main ul is hovered.

Comments