如何使父元素隐藏但子元素内部可见

Question

我有一个简单的后伸幻灯片，里面是导航列表。它的响应式网络，我希望后伸幻灯片消失，但导航列表在宽度小于540px时保持不变。 代码：

<div class="backstretch">
    <ul id="navlist">
        <li id=""><a href="#"></a></li>
        <li id=""><a href="#"></a></li>
        <li id=""><a href="#"></a></li>
    </ul>
</div>

Answer 1

将父级可见性设置为hidden，将子级设置为visible。

尝试：

.backstretch>ul
{
    visibility: visible;
}

.backstretch
{
    visibility: hidden;
}

DEMO