problem displaying vertical menu css

Question

Hi guys,

I've made a vertical menu using css. It's a menu with sub menus similar to this one: http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

here you can see an example:

It work fine but when I click in one of the sub menus to see the information, the others sub menus disappear, that is the menu stay underneath the text. So if I want to change page by clicking in another sub menu I'm not able, I have to return to home.

Here is my css code:

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

and html code:

 <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> 

For example I would use the link above. If I click on sub item 2.1 from folder 2, I will see some page with information.
Now I want to see the sub item 1.1 from folder 1, but my problem is when I click in one of the sub menus I'm not able to see the sub item 1.1, so if I want to click in sub item 1.1 I have to return to the main page

the problem is the following:

Any help would be appreciate :) Thanks!

Answer 1

The problem was the z-index.

I read the tutorials and the front page had an z-index: -1;
and the menu had a z-index: 1;

So the following doesn't work, you have to set something like this:

body
{
    z-index: 1;
 }

sub-menu
{
   z-index: 999;
 }