全宽度的绝对定位元素

Question

我正在尝试创建一个大型菜单。我使用的是列表元素，有些元素内部包含div。

这是我的HTML外观：

<li class="list-item">
<a href="#">Marchés</a>
<div class="sub-menu-wrap">
    <ul class="sub-menu">
        <li><a href="#">Marché 1</a></li>
        <li><a href="#">Marché 2</a></li>
        <li><a href="#">Marché 3</a></li>
        <li><a href="#">Marché 4</a></li>
        <li><a href="#">Marché 5</a></li>
        <li><a href="#">Marché 6</a></li>
    </ul>
</div>
</li>

具有li类的.list-item具有position:relative;，而.sub-menu-wrapper具有position:absolute;和width:100%;

我需要.sub-menu-wrap拥有全屏宽度，但只占用li.list-item的宽度（下面的截图）。

我也尝试了left：0; right：0;为.sub-menu-wrap，但未更改。.

Answer 1

在重新创建代码时，将元素的绝对位置设置为100％时，实际上占据100％的宽度。仔细检查您的语法。请参阅下面的代码段，绝对位置的元素占用了整个宽度。

.list-item{
   position: relative;
   background: lightcoral;
   width: 100px;
}
.sub-menu-wrap{
   position:absolute;
   background-color: lightblue;
   width: 100vw;
}

<li class="list-item">
<a href="#">Marchés</a>
<div class="sub-menu-wrap">
    <ul class="sub-menu">
        <li><a href="#">Marché 1</a></li>
        <li><a href="#">Marché 2</a></li>
        <li><a href="#">Marché 3</a></li>
        <li><a href="#">Marché 4</a></li>
        <li><a href="#">Marché 5</a></li>
        <li><a href="#">Marché 6</a></li>
    </ul>
</div>
</li>