Question

我正在创建一个菜单，如果我将鼠标悬停在li class =“drop”上，那么我的＃capabilitys-dropdown的可见性应该会变得可见，但由于某种原因它不会起作用。有人可以通过告诉我没注意到的内容来帮忙吗？

.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 1

尝试使用

.drop:hover {
    visibility:visible;
}

也许您应该尝试opacity而不是visibility

另外，请将:hover始终放在代码的末尾，如下所示

.example #example:hover{}

而不是

.example:hover #example{}

Answer 2

如果你的css说：

，它不会起作用

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

这意味着#competences-dropdown是.drop的孩子，而不是#competences-dropdown。

所以解决办法是让.drop成为.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; }的孩子，如下所示，一切都应该正常工作：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

下拉菜单在.drop：hover上不可见

2 个答案: