显示垂直菜单css的问题答案

【问题标题】：problem displaying vertical menu css显示垂直菜单css的问题
【发布时间】：2010-10-14 22:37:14
【问题描述】：

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

问题如下：

任何帮助将不胜感激:) 谢谢！

【问题讨论】：

我真的不明白这个问题。你能给我们举个例子吗，或者至少把 HTML 代码也贴出来？
我已经更新了，但我认为是 css 的问题。希望通过示例您可以理解问题。
您仍然需要提供更多信息。您发布的 CSS/HTML 对我不起作用。然而，您似乎只是在与您家不同的页面上遇到菜单问题。你在用别的吗？以 JavaScript 为例？
不，我只使用这个 css 和 html，html 有点大，因为我有一个比我发布的更大的菜单。在主页上一切正常。问题实际上是当我单击某个子菜单并且如果我想切换到另一个子菜单时，我不能，因为子菜单消失了，它们停留在文本下方..我将更新 html，所以你可以再试一次如果你愿意

标签： css

【解决方案1】：

问题在于 z-index。

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

所以下面的行不通，你必须这样设置：

body
{
    z-index: 1;
 }

sub-menu
{
   z-index: 999;
 }

【讨论】：