Css 菜单（子菜单）需要是动态的，而不是静态的

我有一个纯.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在这里：

---

非常非常感谢……

我简化了所有内容，并为您制作了这个。你可以扩展它，用它做你想做的事。我真的不能和你一起工作，结果删除了大部分css

正如您所看到的，我已将类添加到子菜单的每个级别，以便更容易确定目标。我所创造的是我认为你想要的，我希望这能让你走上正轨

---

您需要包括所需的菜单行为。动态是非常模糊的，你目前的小提琴没有做任何事情小提琴的作品完美地为我和显示的问题所描述的。我给另一个用户打了电话，他也能看到小提琴。也许向左移动中心垂直分隔线会有所帮助？我已经进一步描述了上述期望的行为。谢谢。你确定链接正确吗？我使用的是Mac FF，当我在米色栏上悬停时，什么都不会发生。同样的事情发生在你的眼睛上，这是正确的。我用的是电脑/铬。如果你看到的只是一个米色的条，没有菜单文本，那么试着将窗口最大化，或者“抓住”html和css之间的中心垂直条，并将其向左移动。我在另一把小提琴上遇到了这个问题，我就是这样把它展示出来的。对不起，这不是很直截了当，但我不知道还有什么别的办法。谢谢你看。为了简化这个问题，我用你的话向你表示非常感谢。这看起来很好，解决了问题。我还按照你的建议重写了css，尽管你的解决方案更优雅，所以我准备把你的解决方案放在适当的位置。我真的很感谢你投入的时间。现在我必须让响应部分工作…：）祝你有一个美好的一天！

.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%;
}