显示垂直菜单css的问题

Question

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

在这里你可以看到一个例子：

它工作正常，但当我点击其中一个子菜单查看信息时，其他子菜单消失，即菜单停留在文本下方。因此，如果我想通过点击另一个子菜单来改变页面我不能，我必须回家。

这是我的css代码：

#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;}

和html代码：

 <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我有返回主页

问题如下：

任何帮助都会很感激:) 谢谢！

Answer 1

问题是z-index。

我阅读了教程，首页有一个z-index：-1;
菜单有一个z-index：1;

所以以下不起作用，你必须设置这样的东西：

body
{
    z-index: 1;
 }

sub-menu
{
   z-index: 999;
 }