菜單（子菜單）需要動態而不是靜態

Question

我有一個純粹的.css驅動菜單。目前，我在子子菜單上彈出出現在180像素處。這顯然不起作用，因爲只要輸入的菜單文本超過180像素，子菜單文本就會覆蓋子子菜單文本（在示例中，突出顯示產品>美國娛樂中心顯示該問題）。

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