css - 菜单(子菜单)需要动态而不是静态

Question

我有一个纯 .css 驱动的菜单。目前，我在 180 像素处出现了子子菜单上的弹出窗口。这显然是行不通的，因为一旦输入超过 180 像素的菜单文本，子菜单文本就会被子菜单文本覆盖(在示例中，Highlighting Products > Entertainment Centers USA 显示了问题)。

我在 .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/

非常非常感谢......

Answer 1

我已经简化了所有内容并为您制作了这个。你可以扩展它并用它做你想做的事。我真的不能和你一起工作，最后删除了大部分的 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%;
}