sklrboy sklrboy - 3 months ago 10
CSS Question

Dropdown menu doesn't become visible on .drop:hover

I'm creating a menu, where if I hover over the li class="drop", then the visibility of my #competences-dropdown should become visible, but it doesn't wanna work for some reason. Can someone please help by telling what didn't I noticed?



.drop:hover #competences-dropdown {
visibility:visible;
}

#competences-dropdown {
background-color:rgba(51,51,51,0.8);
width:100%;
padding-right:100px;
position:absolute;
z-index:3;
visibility:hidden;
-webkit-transition:1s;
display:block;
}

<div id="menu">
<ul class="navigation">
<li><a href="">Forside</a></li>
<li class="drop"><a href="">Kompetencer</a></li>
<li><a href="">Om Magento</a></li>
<li><a href="">Teamet</a></li>
<li><a href="">Cases</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</div>

<div id="competences-dropdown">
<div class="row">
<div class="col-sm-12">
<ul class="dropdown">
<li><a href="">
<h1>WEBUDVIKLING</h1>
<img class="img-responsive" src="img/dropdown/webdev.png" alt="Webdev"/>
</a></li>
<li><a href="">
<h1>DESIGN</h1>
<img class="img-responsive" src="img/dropdown/design.png" alt="Design"/>
</a></li>
<li><a href="">
<h1>MARKETING</h1>
<img class="img-responsive" src="img/dropdown/marketing.png" alt="Marketing"/>
</a></li>
</ul>
</div>
</div>
</div>




Answer

of cousre it doesn't work as your css says:

.drop:hover #competences-dropdown {
    visibility:visible;
}

which means #competences-dropdown is a child of .drop, which it is not.

so the solution would be making #competences-dropdown a child of .drop as follows, and everything should work fine:

.drop:hover #competences-dropdown {
	visibility:visible;
}

#competences-dropdown {
	background-color:rgba(51,51,51,0.8);
	width:100%;
	padding-right:100px;
	position:absolute;
	z-index:3;
	visibility:hidden;
	-webkit-transition:1s;
	display:block;
}
<div id="menu">
    <ul class="navigation">
        <li><a href="">Forside</a></li>
        <li class="drop">
        <a href="">Kompetencer</a>
        <div id="competences-dropdown">
            <div class="row">
            <div class="col-sm-12">
                <ul class="dropdown">
                    <li>
                        <a href="">
                            <h1>WEBUDVIKLING</h1>
                            <img class="img-responsive" src="img/dropdown/webdev.png" alt="Webdev"/>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h1>DESIGN</h1>
                            <img class="img-responsive" src="img/dropdown/design.png" alt="Design"/>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <h1>MARKETING</h1>
                            <img class="img-responsive" src="img/dropdown/marketing.png" alt="Marketing"/>
                        </a>
                    </li>
                </ul>
            </div>
            </div>
        </div> 
        </li>
        <li><a href="">Om Magento</a></li>
        <li><a href="">Teamet</a></li>
        <li><a href="">Cases</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Kontakt</a></li>
    </ul>
</div>