Jquery 导航容器两端的2个UL菜单

我在一个导航容器中有两个ul菜单，一个菜单在左侧浮动，另一个在右侧浮动。我尝试使用

vertical align:bottom

使菜单位于导航容器的底部，但它们仍然位于顶部。有没有办法让它们沉到水底

CSS/HTML

nav{
背景色：红色；
高度：40px；
垂直对齐：底部对齐；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
#李门{
浮动：左；
}
#男1：之后{
明确：两者皆有；
}
#李门2{
浮动：对；
}
#容器{
明确：两者皆有；
}
a{
显示：块；
宽度：60px；
背景色：#dddddd；
}

您可以尝试使用

位置属性。以下是一个工作示例：


nav{
背景色：红色；
高度：40px；
位置：相对位置；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
底部：0；
宽度：50%；
}
导航>ul#men1>li{
浮动：左；
右边距：0.7em；
}
导航>ul#men2>li{
浮动：对；
左边距：0.7em；
}
ul#men1{
左：0px；
}
ul#men2{
右：0px；
}
a{
显示：块；
背景色：#dddddd；
}

















如果我理解正确：
这是一个

重要部分：
将
nav
位置设置为相对位置

nav{
    position: relative;
    ...
}

（原因是位置绝对元素必须位于相对div的位置）

然后为
men1
和
men2
添加两个css，如下所示：

#men1 {
    position:absolute;
    bottom:0;
    left:0; //similar to float: left; but because of the position:abolute; part, float wont work
}
#men2 {
    position:absolute;
    bottom:0;
    right:0;
}

我是这类事情的超级粉丝


两个无序列表分别为
display:table
和
height:100%
，用于填充导航高度

这两个无序列表“表”是左右浮动的，就像在您的示例中一样

列表项已给出
显示：表格单元格

vertical align:bottom
现在将按预期工作


工作示例

*{
保证金：0；
填充：0；
}
导航{
背景色：红色；
高度：40px；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
显示：表格；
身高：100%；
}
#门1{
浮动：左；
}
#门2{
浮动：对；
}
李海军{
显示：表格单元格；
垂直对齐：底部对齐；
宽度：60px；
}
a{
显示：块；
填充物：5px；
背景色：#dddddd；
}

















尝试使用位置：绝对；底部：0；“坐在底部”是什么意思？请在以后的答案中直接添加代码片段；链接可能会失效。这一次我为您添加了：）谢谢@misterManSam，我甚至不知道您可以直接将运行代码snipet放在上面，太棒了！