所以，我正在尝试创建一个水平翻转菜单。
在我开始处理“当前页面”以显示访问者在导航栏上的位置之前，一切都很好。我想用一个名为“active”的类来做到这一点。我希望子菜单始终可见。
似乎<li>（来自我的导航）在 html 代码中比具有“活动”类的代码更早，在鼠标悬停时没有做出应有的反应；子菜单不再显示...
我不确定我是否清楚或是否有任何意义，这对我来说仍然是一项新技术，解释正在发生的事情非常困难。
请让我知道您是否可以帮助我，或者您是否希望我以不同的方式解释。
非常感谢
米克
更新
这里有一些我现在感谢 Wire42 的截图（我在子菜单项中添加了一些较低的 Z 索引以及白色背景）。所以现在前一个元素对鼠标悬停做出正确反应，但活动元素（在示例中为“采取行动”）不显示子菜单。
图 1：活动项目不显示子菜单（即使没有鼠标悬停它也应该显示子菜单）
图 2：解决了鼠标悬停项目的问题
我错过了什么吗？
CSS
#menu_wrapper {
padding:0;
margin:0;
position:relative;
left:108px;
top:2px;
}
#menu {
width:812px;
height:28px;
background-color: #B4B4B4;
padding:0 0 0 60px;
}
#menu li {
display: inline;
list-style-type: none;
}
#menu li a {
font-size: 13px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
float: left;
color: #000000;
padding: 6px 13px;
border-right: 1px solid #999;
}
/* get rid of last border in menus*/
#menu li:last-child a, #menu li.active li:last-child a, #menu li:hover li:last-child a{
border:none;
}
#menu li:hover > a {
background-color: #e9748b;
}
#menu li.active > a {
background-color: #e9748b;
}
/*-------------------SUB MENU---------------*/
#menu li ul {
display:none;
padding:0 0 0 60px;
}
#menu li:hover > ul {
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
}
#menu li.active > ul{
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
z-index: -1;
}
#menu li li {
list-style:none;
}
#menu li li a, #menu li.active li a{
color:#000000;
background:none;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-right: 1px solid #999;
padding:5px 10px;
margin:0;
}
#menu li.active li a{
z-index:-1;
}
#menu li li a:hover {
background:none;
font-weight: bolder;
color: #000000;
background-color: #CC6633;
}
#menu li li.active a {
text-decoration:underline;
background:none;
font-weight: bolder;
color: #000000;
z-index:-1;
}
HTML
<ul id="menu">
<li><a href="index.html">Home</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#">About the Foundation</a>
<ul>
<li><a href="#">What we do</a></li>
<li><a href="#">Who we are</a></li>
<li><a href="#">Goals for 2012</a></li>
<li><a href="#">Annual reports</a></li>
<li><a href="#">Help 4 Guys .com</a></li>
</ul>
</li>
<li><a href="#">Programs</a>
<ul>
<li><a href="#">Male Abuse Awarness Week</a></li>
<li><a href="#">Help 4 Guys .com</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>
<li class="active"><a href="#">Take Action</a>
<ul>
<li><a href="1">Volunteer for PLF</a></li>
<li><a href="2">Help our Foundation</a></li>
<li class="active"><a href="3">Donate</a></li>
<li><a href="4">FAQ</a></li>
</ul>
</li>
<li><a href="#">Find Support</a>
<ul>
<li><a href="#">Child Abuse FAQ</a></li>
<li><a href="#">Find Support Near You</a></li>
<li><a href="#">Support for the Families</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Our Network</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#"></a></li>
</ul>
</li>
</ul>