html - 悬停菜单超出页面

Question

如您在代码中所见，我有一个悬停菜单。但是，当我悬停时出现问题，悬停内容超出了页面。当我对 div(content) 使用“position: relative”时没问题，但是文本“Example”向左移动，想知道如何修复。

当我使用 position: absolute:

当我使用 position: relative:

ul {
  float: right;
  position: relative;
}

div {
  display: none;
  background-color: red;
  position: relative;
  width: 200px;
}

ul:hover div {
  display: block; 
}

<ul>
  <li>Example</li>
  <div>
    <ol>
      <li>Link 1</li>
      <li>Link 2</li>
    </ol>
  </div> 
</ul>

Answer 1

由于空间不足，你遇到了这个问题 make width:200px; for ul

ul {
    float: right;
    position: relative;
    width: 200px;
}
div {
    display: none;
    background-color: red;
    position: relative;
    width: 200px;
}
ul:hover div {
    display: block; 
}

<ul>
    <li>Example</li>
    <div>
        <ol>
            <li>Link 1</li>
            <li>Link 2</li>
        </ol>
    </div> 
</ul>