I have a nested list as a navigation tool for a mobile website. The a.close-link in last li should close/hide the list #menu with jquery:

```
<ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>  

```

My working jquery solution so far is:

```
$(document).ready(function() {
    $("li a.close").click(function() {
        $(this).parent().hide();
        return false;
    });
});

```

Problem: The list stays on the status "hide" - that means the nested navigation list #menu cannot be openend again. How can I add a line of jquery to get back to the default status?

Thank you for helping!

---

Thank you for your help! You inspired the right solution:

```
<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

```

And the jquery code:

```
$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});

```

It is very useful for mobile browsers because navigation lists stay open on mouseover.