全宽度的绝对定位元素

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>

具有.list-item类的li具有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>