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

Question

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>Forside</li>
<li class="drop">Kompetencer</li>
<li>Om Magento</li>
<li>Teamet</li>
<li>Cases</li>
<li>Blog</li>
<li>Kontakt</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 1

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>Forside</li>
<li class="drop">
Kompetencer
<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>Om Magento</li>
<li>Teamet</li>
<li>Cases</li>
<li>Blog</li>
<li>Kontakt</li>
</ul>
</div>

Answer 2

Try to use
.drop:hover {
visibility:visible;
}
Maybe you should try opacity instead of visibility
Also do put the :hover always at the end of your code like this
.example #example:hover{}
And not
.example:hover #example{}