javascript - 当 parent 失去悬停时保持 ul 可见(如果可能的话纯 css)

Question

我对 CSS 很陌生。当从父级悬停到 ul 时，我想让 ul 保持可见。我不知道怎么做。

HTML 标记

<drop-down class="dropdown">
    <span>Dropdown menu<i class="fa fa-cog"></i></span>
    <ul>
        <li>
            <a href="#">Github<i class="fa fa-github"></i></a>
        </li>
        <li>
            <a href="#">BitBucket<i class="fa fa-bitbucket"></i></a>
        </li>
        <li>
            <a href="#">Dropbox<i class="fa fa-dropbox"></i></a>
        </li>
        <li>
            <a href="#">Google drive<i class="fa fa-google"></i></a>
        </li>
    </ul>
</drop-down>

CSS

drop-down {
    background-color: #e9e9e9;
    border: 1px solid #d2c2c2;
    border-radius: 2px;
    display: flex;
    flex-flow: column nowrap;
    height: 40px;
    justify-content: center;
    position: relative;
    width: 160px;
}
drop-down:hover { cursor: pointer; }
drop-down > span {
    align-items: center;
    color: #555;
    display: flex;
    font-family: 'segoe ui';
    font-size: .9rem;
    justify-content: space-between;
    padding: 0px .75rem;
    pointer-events: none;
}
drop-down > span > i {
    color: inherit;
}
drop-down ul {
    background-color: #e9e9e9;
    border: 1px solid #d2c2c2;
    border-radius: 2px;
    box-shadow: 0px 2px 5px 1px rgba(0,0,0,.15);
    display: block;
    right: 10%;
    list-style: none;
    padding: .5rem 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    top: 160%;
    transition: all .2s ease-out;
    width: 100%;
    z-index: 999;
}
drop-down ul > li {
    color: #555;
    display: block;
}
drop-down ul > li:hover {
    background-color: #007095;
    color: rgba(255,255,255,.9);
}
drop-down ul > li > a {
    align-items: center;
    color: inherit;
    display: flex;
    font-family: 'segoe ui';
    font-size: .95rem;
    justify-content: space-between;
    padding: .5rem .75rem;
    text-decoration: none;
}
drop-down ul > li > a > i {
    color: inherit;
}
drop-down:focus {
    outline: none;
}
drop-down:hover ul {
    pointer-events: auto;
    opacity: 1;
    top: 120%;
    visibility: visible;
}

你可以看到它在这个 fiddle 上运行:http://jsfiddle.net/vt1y9ruo/1/

我可以用 javascript 来做，但我不想用它做一些小事。

Answer 1

这是一个工作 fiddle :http://jsfiddle.net/vt1y9ruo/8/

它的工作原理是在按钮和列表之间插入一个不可见的桥梁。

drop-down:hover ul, #ulwrap:hover ul {
    pointer-events: auto;
    opacity: 1;
    top:120%;
    visibility: visible;
}
#ulwrap {
    display: block;
    height:0;
    width:100%;
    position:absolute;
}
drop-down:hover #ulwrap, #ulwrap:hover {
    height:100px;
}