css - 左右に境界線があるCSSドロップダウンメニューを作成するにはどうすればよいですか？

Question

右端のドロップダウンリストが左ではなく右に配置される水平cssドロップダウンメニューを作成する必要があります。

子ULLIが親LIよりも長いと仮定すると、それらは親LIと左揃えになりますが、子ULの右端が親UL（メニューコンテナ）の右境界を越えて流れる場合、子ULは右揃えになります。親LIのエッジ。

使用例：画面幅が100％の流動的なページレイアウト—ドロップメニューで水平スクロールを強制することはできません。

例えば

<ul id="menu">
  <li>First Item
    <ul>
      <li>First sub item</li> # aligns to the left
    </ul>
  </li>
  <li>Second Item
    <ul>
      <li>second list sub item</li> # aligns to the left edge of parent
    </ul>
  </li>
  <li>Third Item
    <ul>
      <li>third list sub item</li> # aligns to the left edge of parent
    </ul>
  </li>
  <li>Fourth Item
    <ul> # expected to flow over right edge
      <li>fourth list sub item</li> # aligns to the right of parent LI
    </ul>
  </li>
  <li>Fifth Item
    <ul> # expected to flow over right edge
      <li>fifth list sub item</li> # aligns to the right of parent LI
    </ul>
  </li>
</ul>

そしてCSS：

#menu, #menu li {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
list-style:none;
}
#menu {
width:100%;
float:left;
position:relative;
padding:0;
margin:2em 0;
z-index:5;
}
#menu li {
position:relative;
float:left;
width:20%; /* 5 list items for main nav */
}
#menu li a {
text-decoration:none;
display:block;
}
#menu li a:hover, #menu li:hover a {
text-decoration:none;
}
#menu ul {
position:absolute;
left:-9999px;
margin:0;
padding:0;
}
#menu ul li {
border-top:1px solid #fff;
float:none;
width:100% !important;
}
#menu ul a {
white-spacing:nowrap;
font-weight:normal;
}
#menu li:hover ul {
left:0;
}
#menu ul li a {
padding:0.5em 1em;
}