（CSS）单击菜单/下拉菜单，更改Div

Question

我不知道任何java，我只是进入html / css。我一直在寻找谷歌...得到很多部分例子，但我不知道如何使它们一起工作。我想点击我用作按钮的图像，并显示2个列表项。这两个列表项都有3个子列表项，每个子列表有5个项。我知道HTML，但我似乎无法按照我的需要设计它。这就是我想要的：

当我点击Me时，House1和House2会下降。

然后，如果我选择House1，House2就会消失，只有House1的三个列表会显示出来。

从那里，如果我选择BackYard，我希望FrontYard和Side消失，只显示BackYard的五个项目。

看完之后，我可以看出这看起来多么令人困惑。我试图在Paint中绘制一些东西，稍后会更新帖子大声笑。我得到的最接近的是使用细节/摘要方法，但我无法显示：无法工作，我无法摆脱每个细节标签上的黑色箭头。

编辑：这里有我的详细信息/摘要方法。请原谅这种草率的间距...... http://jsfiddle.net/New2Code/ap1s3hto/

当我点击区域1＆gt;东，我想要隐藏一切，除了区域1，东部，以及它的5个缩略图在中心。现在的方式，西部和中部滑向侧面，区域2仍然显示在底部。

<ul id="clickMe"><img src="buttonPic"/>



<li>House1
    <ul>
        <li>FrontYard
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
        <li>BackYard
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
        <li>Side
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
   </ul>
</li>






<li>House2
<ul>
        <li>FrontYard
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
        <li>BackYard
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
        <li>Side
            <ul>
                <li>Stuff1</li>
                <li>Stuff2</li>
                <li>Stuff3</li>
                <li>Stuff4</li>
                <li>Stuff5</li>
            </ul>
        </li>
   </ul></li>