Question

我正在尝试使用HTML / CSS创建一个下拉菜单。实际上，这是问题的直接菜单。将鼠标悬停在导航栏项目上会在某个项目上触发下拉菜单，然后将鼠标悬停在此子菜单中的项目上方，以显示项目右侧的另一个子菜单（垂直菜单）。当我将鼠标悬停在具有子项目的项目上时，它应该继续显示项目子菜单。

这是用于显示dropright菜单的（错误）代码：

#droprightMenu {
    display: none; /* hide the sub menus */
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}

#droprightMenu li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;

}

#droprightMenu li a {
    color: #fff;
}   

#droprightMenu li a:hover {
    background: #4b545f;
}

这是我现在拥有的： http://jsfiddle.net/vvozar/yL7su/

现在，正如你可以看到当悬停在项目“类别”上，然后在其子项“全部”上，我正在下面的下拉菜单，我不想要。我希望该菜单显示在项目的右侧。我希望这个用“id”设置样式，因为我将动态地（在循环中）创建这个子菜单（无序的html列表），我不知道它会有多深。感谢任何帮助。

Answer 1

你需要这个：

#droprightMenu li ul {
    left:120px;
    top:0px;
}

请参阅：http://jsfiddle.net/JL4JY/

CSS样式下拉/右子菜单

1 个答案: