可浏览的菜单超出了页面

Question

我有一个可以在代码中看到的可浏览菜单。但是，当我悬停时，我遇到了一个问题，即悬停内容超出了页面。当我对div（内容）使用“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

由于空间不足，您可以width:200px;

获取此问题ul

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用绝对位置，并操纵其位置设置负边距......

＆＃13;

＆＃13;

ul {
  float: right;
  position: relative;
}

div {
  display: none;
  background-color: red;
  position: absolute;
    width: auto;
    margin-left: -26px;
}

ul:hover div {
  display: block; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除div，将宽度应用于ul并应用display: none并将鼠标悬停在ol上。

ul {
  float: right;
  width: 200px;
}

ol {
  display: none;
  background-color: red;
}

ul:hover ol {
  display: block; 
}

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

第二个版本：如果您希望所有内容都是正确的，请将float: right;应用于之前使用的HTML结构中的ul和li：

ul {
  float: right;
}

ol {
  display: none;
  background-color: red;
}

li {
  float: right;
  clear: right;
}

ul:hover ol {
  display: block;
}

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

Answer 4

它的自然行为，它将取决于标题文本长度，它将为下面的文本设置你的最大长度，你需要为标题元素定义一个固定的宽度，而不是在子元素1上定义你做到了。 动态宽度示例（作为弹性容器的自然div属性）：

＆＃13;

＆＃13;

ul {
  float: right;
  position: relative;
}

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

ul:hover div {
  display: block; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

第二个例子，将固定宽度设置为父框，让child / s元素具有自动宽度（它们永远不会占用比父级宽度更多的宽度，因为它们可以增加高度，使用固定的高度自动覆盖高度auto导致溢出）：

＆＃13;

＆＃13;

    ul {
      float: right;
      position: relative;
      width: 100px;
      text-align: right;
      list-style: none;
    }

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

    ul:hover div {
      display: block; 
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以使用 Flexbox 执行此操作，而无需不必要的浮动和定位。

在评论中写下容器的解决方案：

＆＃13;

＆＃13;

.container {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid;
}

ul {
  display: flex; /* displays children inline by default that's why you need to change its direction */
  flex-direction: column; /* stacks children vertically */
  align-items: flex-end; /* places them far right */
}

ul > div { /* modified for accuracy */
  display: none;
  background-color: red;
  width: 200px;
}

ul li:hover + div { /* modified for accuracy since the inner div is the next element after the li */
  display: block; 
}

li + div:hover {display:block} /* needs to be in order to be displayed when hovering over */

＆＃13;

<div class="container">
  <ul>
    <li>Example</li>
    <div>
      <ol>
        <li>Link 1</li>
        <li>Link 2</li>
      </ol>
    </div>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您不喜欢上述解决方案，那么您只需将right: 0添加到绝对定位的div：

＆＃13;

＆＃13;

.container {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid;
}

.container:after {
  content: "";
  display: block;
  clear: both;
}

ul {
  float: right;
  position: relative;
}

ul > div {
  display: none;
  background-color: red;
  position: absolute;
  right: 0; /* added */
  width: 200px;
}

ul:hover div {
  display: block; 
}

＆＃13;

<div class="container">
  <ul>
    <li>Example</li>
    <div>
      <ol>
        <li>Link 1</li>
        <li>Link 2</li>
      </ol>
    </div> 
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;