我很确定我没有在CSS中建立此层次结构。我似乎找不到真正可以向我解释的地方以及每个级别的工作方式。我找到了一些可以显示的东西,但是如果您不知道(至少对我来说)构建它,那很难看。到目前为止,从未真正使用过令人惊讶的CSS。如果有人不介意指出我的错误并加以解释。 :)
我只是想添加第二个下拉菜单(下拉菜单到我的下拉菜单),当选择正确的下拉菜单时,它将在初始隐藏的下拉菜单下水平显示,因此正确的php ID将填充在链接中。我包括了PHP,所以如果我把它放错了,也会有人向我指出。
还要补充一点:当我将鼠标悬停在“项目”上而不是像应该那样将鼠标悬停在已填充的项目上时,隐藏的第二级下拉链接似乎在那里。奇怪的是,链接实际上并未显示(不可见),但是如果我将鼠标放在那里(即让我知道有链接)。
http://jsfiddle.net/HHwLH/
最佳答案
在你的CSS中
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
您的子菜单和子子菜单受此影响。
当您将鼠标悬停在
li
上时,所有ul
后代都会受到影响(子菜单和子子菜单)在标记中,
ul
是li
的子代,因此您可以使用子代选择器而不是子代选择器来仅显示直接子菜单/ ul。#navbar li:hover > ul, #navbar li.hover > ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
这将同时适用于子菜单和子菜单
FIDDLE