下拉菜单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/