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

我有一個純粹的.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/

很多，非常感謝.....

來源

2015-02-04 user3340470

您需要包括菜單的期望的行爲。動態是非常模糊的，你目前的小提琴不會做任何事情 – Huangism

小提琴完全適合我，並顯示所述的問題。我已經打電話給另一個用戶，他也可以查看小提琴。也許將中心垂直分頻器移動到左邊會有幫助嗎？我已經進一步描述了上面的期望行爲。謝謝。 – user3340470

確定鏈接是正確的？我使用Mac FF，當我將鼠標懸停在米色欄上時，沒有任何反應。同樣的事情在鉻 – Huangism

我已經簡化都記錄下來並提出這個要求。你可以擴展它，並做它你想要的。我無法真正與你合作，最終刪除了大部分的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%; 
}

來源

2015-02-05 14:16:03 Huangism

非常感謝。這看起來非常好，並解決了這個問題。我也按照你的建議重寫了css，雖然你的解決方案更加優雅，所以我即將把你的解決方案放在原地。我真的很感激你投入的時間。現在我必須讓響應部分工作...... :)祝你有美好的一天！ – user3340470

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

回答

相關問題