CODEWITHSUNDEEP
htmlcssdrop-down-menu
sklrboy
sklrboy

Reputation: 451

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>

Upvotes: 0

Views: 54

Answers (2)

Khaled Mashaly
Khaled Mashaly

Reputation: 1195

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>

Upvotes: 1

Pepe Bellin
Pepe Bellin

Reputation: 85

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{}

Upvotes: 1

Related Questions