CSS выпадающее меню с подменю совместив справа от его родителя

Question

HTML

<div id="dropmenu" class="dropmenu"> 
    <login> 
     <ul> 
      <li><a href="/menu1">Menu1</a> 
      <li> <a href="javascript:void(0);">Username</a> 

       <ul> 
        <li><a href="/profile">Profile</a> 
        </li> 
        <li><a href="/transactions">Transactions</a></li> 
        <li><a href="/account/sign-out" data-load="refresh">Logout</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </login> 
</div> 

Css

.dropmenu ul { 
    list-style-type: none; 
} 

/* login menu */ 
.dropmenu login ul { 
    margin: 0; 
} 
.dropmenu login > ul > li { 
    float: right; 
    border: 1px solid red; 
} 
.dropmenu login > ul > li > a { 
    display: inline-block; 
    padding: 10px 20px; 
    color: #ffffff; 
} 
.dropmenu login > ul > li > a:hover { 
    background-color: #f3f5f5; 
    color: #545d5f; 
} 
#cart-button { 
    font-size: 14px; 
} 
/* login drop-down */ 
.dropmenu login ul ul { 
    display: none; 
    position: absolute; 
} 
.dropmenu login ul > li:hover ul { 
    display: block; 
} 
/* login sub-menu */ 
.dropmenu login > ul > li > ul > li > a { 
    display: inline-block; 
    width: 100px; 
    padding: 10px 20px; 
    background: rgb(130, 160, 46); 
    background: rgba(130, 160, 46, 0.92); 
    color: #ffffff; 
} 
.dropmenu login > ul > li > ul > li > a:hover { 
    background-color: #f3f5f5; 
    color: #545d5f; 
} 

Как я могу сделать так, чтобы выпадающее меню выровнен по правому краю, чтобы его родителей?

http://jsfiddle.net/31bvbve4/

Answer 1

Этот CSS должен работать для вас:

.dropmenu login > ul > li { 
    position: relative; 
} 

.dropmenu login ul ul { 
    position: absolute; 
    right: 0; 
    top: 100%; 
} 

скрипку: https://jsfiddle.net/lmgonzalves/31bvbve4/1/