html - 处理滚动菜单 (css) - 我的菜单运行良好，直到我想区分当前页面

Question

所以，我正在尝试创建一个水平滚动菜单。

在我开始处理我的“当前页面”以显示访问者在导航栏上的位置之前，一切都很好。 我想用一个名为“active”的类来做到这一点。 我希望子菜单始终可见。

好像<li> (来 self 的导航)在 html 代码中比具有“事件”类的代码早，当鼠标悬停时它们不会像预期的那样使用react；子菜单不再显示...

我不确定我是否清楚或是否有任何意义，这对我来说仍然是一项新技术，解释正在发生的事情非常困难。

如果您能帮助我，或者您是否希望我做出不同的解释，请告诉我。

非常感谢

米克

---

更新

这是我现在感谢 Wire42 的一些屏幕截图(我向子菜单项添加了一些较低的 Z 索引以及白色背景)。 所以现在前一个元素对鼠标悬停做出了正确的 react ，但事件元素(在示例“采取行动”中)不显示子菜单。

image 1:事件元素不显示子菜单(即使没有鼠标悬停也应该显示子菜单)

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

Answer 1

这是一个使用纯 CSS 而不使用 javascript 的解决方案: http://jsfiddle.net/nammp/1/

这段代码做了两件事(当我回答这个问题时，它在那里被黑了，但如果其他人没有先得到它，我会回去清理它):

1. 事件元素的 z-index 为 -1，因此在悬停元素下呈现
2. 悬停元素获得白色 background-color 因此它们在视觉上隐藏了事件元素

我认为这可以解决问题。希望我们可以解决这个问题，让代码更通用一些。