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 回答