3

想象一下，我们有一个水平下拉菜单，其结构如下：

<ul class="root">
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
  ...
  <li class="root-item">
    <ul class="submenu">
        <li></li>
        <li></li>
        <li></li>
    </ul>
  </li>
</ul>

CSS大致是这样的：

.root-item{
    position:relative;
    display:inline-block;
}
.submenu{
    position:absolute;
    top:-1000px;
}
.root-item:hover .submenu{
    top:100%;
}

这里的问题是：如果某些（比如最后一个）.submenu 足够宽，它可能会超出 .root 边界，并最终超出视口（如果 .root 的宽度是 VP 的 100%）。

我想要的是使 .submenu-s 适合 .root; 这意味着.sumbenu的左右不会变成负数。但是 - 使用纯 css，非常好奇，是否可以在这里跳过使用 javascript。所需的结果就像这里的功能区菜单。那可能吗？

谢谢！

4

1 回答 1

2

这个怎么样？

http://codepen.io/MisterGrumpyPants/pen/IwfDC

除了一些边框和背景来充实外观之外，我添加到您的 CSS 中的只是两类子菜单：一类对齐其父项的左侧并向右延伸（“向右”），而另一类对齐到向右并向左延伸（“向左”）。

这是一个简单的解决方案，如果您知道哪些子菜单需要向左扩展，哪些可以向右扩展，并且您可以控制子菜单的类，则该解决方案应该可以工作。

（如果您需要更复杂的东西（例如，您不想自己应用“to-right”和“to-left”类），那将需要更多的思考。）

更新

这是另一支笔，它利用:nth-child选择器来确定子菜单的摆动方式，而不是手动应用“to-right”和“to-left”类名：

http://codepen.io/MisterGrumpyPants/pen/ovJcH

于 2013-08-31T00:05:10.317 回答