Question

如何阻止右侧菜单下拉子元素离开页面？我知道它很简单，但不知道要改变它以使其工作的CSS。任何帮助表示赞赏。

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Your page title</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
    <style>
        ul{background-color: #4CAF50; width: 100%}

    </style>
</head>

<body>
<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>

        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>

        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover" style="float:right">
            <a href="#" id="menuLink2" class="pure-menu-link">Test</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item""><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>


    </ul>
</div>
</body>
</html>

我想让它们从页面右侧开始，但不要离开。

感谢

Answer 1

通过一些调整和添加CSS，您可以实现这一目标。看到这个JSFiddle，我也清理了你的代码。

将课程.right-menu添加到最右侧菜单中以使其正常工作。

.pure-menu-horizontal .right-menu .pure-menu-children {
  left: auto; /* Position from right, not from left */
  right: 0; /* Position from right, not from left */
}

更新

我使用display: flex;来解决the problem that Firefox必须正确显示您想要的菜单的问题。

这是您需要添加的内容：

.pure-menu-horizontal .pure-menu-list.pure-menu-list {
  display: flex;
}

.pure-menu-horizontal .right-menu {
  margin-left: auto;
}

见my updated JSFiddle。在Mozilla Developer Network了解有关方便 flexbox媒体资源的详情。

PureCSS菜单下拉元素关闭页面

1 个答案: