CSS 右侧下拉菜单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7654480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:49:35  来源:igfitidea点击:

Right side drop down menu

css

提问by timborden

Found a nice drop down menu:

找到一个不错的下拉菜单:

Demo: http://www.jqueryload.com/examples/menu/

演示:http: //www.jqueryload.com/examples/menu/

HTML, CSS & JavaScript: http://www.jqueryload.com/jquery-dropdown-menu-with-google-style

HTML、CSS 和 JavaScript:http: //www.jqueryload.com/jquery-dropdown-menu-with-google-style

I've aligned the main menu to the right side of the browser window. I wanted to have the selected drop down menu open to the left (as in the example, the drop down container is wider than the main menu selector). In other words, I'm hoping to have the mirror image.

我已将主菜单与浏览器窗口的右侧对齐。我想让选定的下拉菜单向左打开(如示例中所示,下拉容器比主菜单选择器宽)。换句话说,我希望有镜像。

Can this menu be updated to work as I'd hoped?

这个菜单可以更新为我希望的那样工作吗?

回答by Joseph Marikle

.menu ul li {
    padding: 0;
    float: right;
    position: relative;
}

.menu ul li ul {
    position: absolute;
    border: 1px solid #C3D1EC;
    box-shadow: 0 1px 5px #CCCCCC;
    margin-top: -1px;
    display: none;
    padding: 0px 16px 0px 0;
    right: 0px;
    white-space: nowrap;
}

That will align it to the right. CSS used include position:relativeand float:righton the <li>'s and right:0pxand white-space:nowrapon the embedded <ul>'s

这将使其与右侧对齐。使用的 CSS 包括position:relativefloat:right<li>'s 和right:0pxwhite-space:nowrap在嵌入的<ul>'s 上