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;}
}

我建议你给你一个基础，以避免冲突。

Answer 2

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

DEMO

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; }
}

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

3 个答案: