Question

很容易拥有LI＆gt; UL子菜单显示CSS：

import requests
import time

your_header = {'user-agent': 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36'}

while 1:
    r = requests.request("GET","http://www.google.com",headers=your_header)
    if r.status_code == 200:
        print("It's on!")
    else:
        break
    time.sleep(2)

在这种情况下，子菜单的大小会自动调整为内容的宽度。子菜单左对齐父LI元素的左侧。

让我们说我想将子菜单对齐，所以右边应该与父LI的右边对齐。我可以通过固定宽度的子菜单来做到这一点，并使用它（假设父LI是100px宽）：

.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

但是，您不能再使用灵活宽度子菜单了。此外，您需要知道父LI的宽度。

JS Fiddle最好地解释了我的问题：https://jsfiddle.net/ybc0uxq8/1/

任何人都知道如何让子UL的右侧与父LI的右侧对齐，而不需要固定的子菜单宽度，并且允许子菜单宽度大于父LI？

Answer 1

一个好方法是放置.menu li { position:relative;...}，这样当position属性设置为absolute时，子元素将相对放置到父级。然后从width选择器中移除#menu-left li:hover > ul属性，并将right:0添加到其中。

更新。要使子条目大于其父级（根据注释中的要求），请设置.menu li ul选择器的属性，如下所示：

.menu li ul { display: none; min-width:150px; }

请在此处查看fiddle（已更新）。

Answer 2

根据评论/请求，以下是原始CSS代码的编辑版本，以反映所需的结果：

/* apply to both */
.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }

具有动态宽度的CSS下拉子菜单：如何左对齐？

2 个答案: