显示垂直菜单css时出现问题

我用css制作了一个垂直菜单。这是一个菜单,其子菜单与此类似: http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

这里您可以看到一个示例:

它工作得很好,但是当我点击其中一个子菜单查看信息时,其他子菜单消失了,即菜单停留在文本下面。所以,如果我想通过点击另一个子菜单来改变页面,我不能,我必须返回主页。

#menu ul {
list-style: none;
margin: 0;
padding: 3px;
width: 100%;
font-size: 14px;
}

#menu h2 {
color: white;
background: #9370D8;
padding: 4px;
text-align:center;
font-size:15px;
width: 100%;
display: block;
}

#menu a {
color: black;
background: white;
text-decoration: none;
display: block;
font-weight: bold;
width: 100%;
padding:4px;
}

#menu a:hover {
color: black;
background: #eee;
}

#menu li {
position: relative;
} 

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

 <div id="menu">
   <ul>
    <li><h2>Browse</h2>
      <ul>
         <li><a href="/browse/districts/">Districts</a></li>
         <li><a href="/browse/time/" >Time</a></li>
      </ul>
    </li>
    </ul>
    <ul>
      <li><h2>Analyze</h2>
         <ul>
            <li><a href="#">Co-occurrence</a>
              <ul>
                <li><a href="/analyse/co-occurrence/percentage" >Percentage</a></li>
                <li><a href="/analyse/co-occurrence/regions" >Regions</a></li>
              </ul>
            </li>     
            <li><a href="#">Geographical</a>
             <ul>
                <li><a href="/analyse/geographical/districts/">Districts</a></li>
                <li><a href="/analyse/geographical/citizenship/">Citizenship</a></li>
            </ul>
           </li>  
         </ul>
  </div> 

例如,我会使用上面的链接。如果我点击文件夹2中的子项2.1,我会看到一些包含信息的页面。
现在我想查看文件夹1中的子项1.1,但我的问题是,当我单击其中一个子菜单时,我看不到子项1.1,因此如果我想单击子项1.1,我必须返回主页

问题如下:

谢谢!