我有一个纯粹的.css驱动菜单。目前,我在子子菜单上的弹出按钮出现在180px。这显然不起作用,因为只要输入超过180px的菜单文本,子菜单文本就会覆盖子子菜单文本(在示例中,突出显示产品>美国娱乐中心显示问题)。
.css中我明确指出180px宽度的位置在下面。我需要它是动态的,即所需的行为是弹出窗口与第一级垂直菜单的右侧对齐,而不管第一级子菜单的宽度。
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
jfiddle在这里:
http://jsfiddle.net/9c8wcxju/4/
很多,非常感谢.....
答案 0 :(得分:0)
我已将所有内容简化下来并为您完成此操作。你可以扩展它并用它做你想做的事情。我无法真正与你合作,最终删除了大部分的CSS。
正如您所看到的,我已将子类添加到子菜单的每个级别,因此更容易定位。我所创造的就是我想你想要的,我希望这会让你走上正轨。
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}