Question

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

<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%;
}

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

我想要的是.submenu-s适合.root;意味着.sumbenu的左和右不会变为负数。但是 - 使用纯css ，只是非常好奇，如果有可能在这里跳过使用javascript。期望的结果类似于ribbon menu here。这可能吗？

谢谢！

Answer 1

这个怎么样？

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

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

这是一个简单的解决方案，如果你知道哪个子菜单需要向左扩展哪个子菜单可以向右扩展，你可以控制子菜单的类。

（如果你需要更复杂的东西（例如你不想自己申请“向右”和“向左”），那就需要更多考虑。）

<强>更新

这是另一支使用:nth-child选择器确定子菜单摆动方式的笔，而不是手动应用“向右”和“向左”的类名：

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

使绝对定位的孩子不会跑出视口边界

1 个答案: