How to make parent element hide but child inside be visible

Question

I have a simple backstretch slideshow and inside of this is navigation list.It's responsive web and I want the backstretch slideshow dissapear, but navlist to stay when the width is smaller than 540px. Code:

<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

Set the parent visibility to hidden and child's to visible.

Try:

.backstretch>ul
{
    visibility: visible;
}

.backstretch
{
    visibility: hidden;
}

DEMO