使绝对元素成为其父对象的宽度

Question

我有一个绝对位置的下拉菜单，它采用其父级的宽度，设置为其li的33％。

现在，当我将尺寸向下移动到移动设备时，我希望下拉菜单的宽度为其父级的父级的100％。

所以基本上是在台式机上：我希望下拉列表的宽度是其父级li的宽度。

在移动设备上：我希望下拉列表是整个导航的宽度。

我对媒体查询器感到满意，我只是想知道如何才能使CSS工作。

<ul>
  <li class="n1">Nav 1</li>
  <li class="n2">Nav 2</li>
  <li class="n3">Nav 3
    <ul class="dropdown">
        <li>DropDown 1</li>
        <li>DropDown 2</li>
        <li>DropDown 3</li>
    </ul>
</li>

这是一个小提琴：

JSFiddle

理想情况下，我需要仅CSS的解决方案。

Answer 1

以您的.dropdown样式添加关注者

.dropdown{
    left:0;
    width:100%;
}

＆使用以下媒体查询

@media screen and (max-width:960px) {
    ul{position:relative;}
    ul li{position:static;}
}

我建议您给ul-li基础班避免冲突。

Answer 2

@media screen and (max-width: 600px){
    .dropdown, li{
        width: 100%;
    }    
}

演示

Answer 3

如果您想保留父母并且仅将下拉菜单的宽度设置为100％，则可以执行以下操作：

http://jsfiddle.net/W44XL/6/

@media only screen and (max-width:480px) {
    ul { position: relative; }
    li { position: static; }
    .dropdown { left: 0;
        right: 0; }
}