Html 如何使li下拉菜单占据视口的全宽？

我想建立一个带有列表的导航。最后一个列表项将包含ul。我希望ul在默认情况下被隐藏，并且只有当其父级li悬停时才可见。我想让

我的下拉内容

占据视口的整个宽度，而不仅仅是它的父视图的宽度。我似乎做不到

所附图像显示了我的导航的外观。。我想让这个乱七八糟的下拉列表在悬停在“更多…”上时占据全部宽度

我有这样一个代码：

。我的下拉列表{
位置：相对位置；
显示：内联块；
}
.我的下拉列表内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#0A141A；
最小宽度：1400px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.我的下拉列表内容李{
填充：12px 16px；
文字装饰：无；
显示：块；
}
.我的下拉列表：悬停.我的下拉列表内容{
显示：块；
}

您可以在

悬停

上使用固定的

位置

，如下所示

。我的下拉列表{
位置：相对位置；
显示：内联块；
}
.我的下拉列表内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#0A141A；
最小宽度：1400px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.我的下拉列表内容李{
填充：12px 16px；
文字装饰：无；
显示：块；
}
.我的下拉列表：悬停.我的下拉列表内容{
显示：块；
位置：固定；
高度：100vh；
宽度：100vw；
排名：0；
左：0；
}
.我的下拉列表内容a{
文字装饰：无；
颜色：#fff；
}

因为您可以通过设置

的
最小宽度
来解决问题。我的下拉内容

，这是一个很好的起点。问题在于调整窗口大小。因此，您需要定义一个窗口大小调整事件：

document.getElementsByTagName("body")[0].addEventListener("resize", function() {
    var dropDownContents = document.getElementsByClassName("my-dropdown-content");
    for (var index in dropDownContents) {
        dropDownContents[index].style["min-width"] = getDesiredSize(dropDownContents[index]);
    }
});

---

其中，

getDesiredSize

是您需要实现的一个函数，它将获取一个项目并返回其所需的

最小宽度

。如果所有的

min width

值将彼此相等，而不考虑大小的值，那么您可以在每个调整大小事件中计算一次。

您不需要过于复杂。。。。 使用“带：100%”代替“最小宽度：1400px”

根据您想要实现的目标，您可以使用

vw

单位（视口宽度）并将其设置为

100vw

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

---

完整的工作示例

/*vv仅用于演示目的*/
@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
正文{顶部填充：60px；}
.menu{列表样式：无；填充：0；}
.menu>li{浮动：左；宽度：20%；}
.menu>li>a{显示：块；边框：1px纯黑色；填充：1em}
/*^^仅供演示之用*/
.我的下拉列表{
位置：相对位置；
显示：内联块；
}
.我的下拉列表内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#0A141A；
宽度：100vw；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.我的下拉列表内容李{
填充：12px 16px；
文字装饰：无；
显示：块；
}
.我的下拉列表：悬停.我的下拉列表内容{
显示：块；
}

哦，不！这让事情看起来很糟糕。。运行您的代码段。。根本解决不了我的问题problem@Saroar您希望获得完整的视口宽度和高度，这可以使用vh和vw实现，如果“固定”不起作用，则将“位置：固定”更改为“绝对”，并从父div中删除“相对”，然后重试。这将是最接近的父元素的100%。因此，它将不是100%的屏幕，而是容器元素（本例中的

.my下拉列表
元素）
.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}