html - 即使没有悬停在父元素上，子元素也会出现

Question

在父元素悬停时，子元素出现，但不悬停时，子元素仍然出现。

这是我的 CSS:

.profile-dropdown{
    border: 1px solid #ccc;
    border-radius: 3px;
    position: relative;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 10px !important;
    cursor: pointer;
    color: #666;
}

.profile-dropdown > ul{
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    list-style: none;
    z-index: 99999;
    border: 1px solid #ccc;
    background-color: #fff;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.profile-dropdown:hover > ul
    visibility: visible;
    opacity: 1;
    transform: translateY(0px); 
}

这是我的 HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 profile-dropdown">
    <p>
        <i class="fa fa-user"></i> Some Text <i class="fa fa-angle-down pull-right"></i>
    </p>
    <ul>
        <li><a href="#">Edit</a></li>
        <li><a href="#">View</a></li>
    </ul>
</div>

正如我所说，我试图在父元素悬停时显示子元素 (ul)。

当我将鼠标悬停在父元素上后，子元素消失了，当我尝试转到父元素时，即使我没有悬停在父元素上，子元素也会再次显示。

有人可以帮忙吗？ 提前致谢

Answer 1

缺少{

.profile-dropdown:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px); 
}

按照 OP 的要求工作:https://jsfiddle.net/f8g7z2wx/

等待更新问题...