Q:

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>

A:

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>

