下拉菜單css右對齊

Question

Hy。

我將從這開始：我已閱讀關於此的每一個關於stackoverflow的帖子，我看到很多建議和教程，但我卡住了，因爲我真的不明白我的代碼中的問題在哪裏。 我寫了W3schools教程後的代碼，它的效果很好，但 我已經參加了float:left,position:relative的各種組合，但無法弄清楚。

我的問題是：我如何以這種方式改變CSS屬性，這將導致二級菜單打開在他父母的右側，而不是像現在這樣。 當您打開「Projects」元素時，您可以看到第二級菜單。 這是菜單https://jsfiddle.net/Anaramia/mw4u2wtu/

CSS

.mainMenubackground { 
    background-color: #37459D; 
    width: 100%; 
} 
.mainMenu { 
    font-family: 'Kadwa', serif; 
    font-size: 10px; 
    min-width: 250%; 
} 
.submenu { 
    left: 100%; 
    top: 0; 
} 
ul { 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    overflow: hidden; 
} 
li { 
    float: left; 
} 
li a, 
.dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 5px 38px; 
    text-decoration: none; 
    font-size: 18px; 
} 
li a:hover, 
dropdown:hover .dropbtn { 
    background-color: #798AF7; 
} 
li.dropdown { 
    display: inline-block; 
} 
li:hover ul { 
    /* when list items are hovered over, do this to lists contained within them... */ 

    display: block; 
} 
.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #37459D; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #303d70), color-stop(100%, #a6acd4)); 
    opacity: 0.9; 
    filter: alpha(opacity=90); 
} 
.dropdown-content a { 
    display: block; 
    color: white; 
    padding: 8px 10px; 
    text-decoration: none; 
    text-align: left; 
    font-size: 14px; 
    border: 2px solid #FFF; 
    border-top: 0 none; 
} 
.dropdown-content a:hover { 
    background-color: #37459D; 
} 
.dropdown:hover .dropdown-content { 
    diplay: block; 
} 

Answer 1

嘗試使用位置：相對於（不是絕對）爲.dropdown的內容和變化顯示：塊到顯示：對李內聯塊：懸停UL

li.dropdown { 
    display: inline-block; 
} 

    li:hover ul { 
     display: inline-block; 
    } 

    .dropdown-content { 
     display: none; 
     position: relative; 
     background-color: #37459D; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #303d70), color-stop(100%, #a6acd4)); 
     opacity: 0.9; 
     filter: alpha(opacity=90); 
    } 

這提示應該是有助於您

編輯： 也許這是接近你需要的東西： https://jsfiddle.net/mw4u2wtu/14/