如何在<li>之外放置<ul>？

Question

所以，我试图创建一个子下拉菜单，但我在定位它时遇到了麻烦。它扩展到<li>的内部（基本上，它设置为<ul>的最大宽度。）

＆＃13;

＆＃13;

ul.dropdown, ul.subdropdown-content
{
    position:           absolute;
    background-color:   #FF0000;
    padding:            18.5px 18.5px;
    overflow:           hidden;
}

ul.subdropdown-content
{
    margin-right:   -30px;
    right:          0;
}

ul.dropdown > li, ul.subdropdown-content > li
{
    padding:            10px;
    display:            block;
    text-align:         left;
    background-color:   #FFF;
}

＆＃13;

<ul class="dropdown">
  <li>Item #1 [Additional text, words, sentences]
    <ul class="subdropdown-content">
      <li>Sub-Item #1 [Additional text, words, sentences]</li>
      <li>Sub-Item #2</li>
      <li>Sub-Item #3</li>
      <li>Sub-Item #4</li>
    </ul>
  </li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
  <li>Item #6</li>
  <li>Item #7</li>
  <li>Item #8</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

.subdropdown-content应该延伸到父<ul>的右侧，而不是左侧。

Answer 1

ul.dropdown, ul.subdropdown-content{
position: relative;
}

ul.subdropdown-content
{
margin-left: 20px;
}

并调整DropDown的宽度。 如果不是你想要的，请详细说明问题。