Question

我正在尝试制作响应式菜单栏，因为我正在使用媒体查询。所以我使用这个css代码并使用position:absolute 属性所以我的标题不会随着下拉菜单展开 position:absolute属性会自动应用于其他媒体查询所以我怎么能阻止它？

nav li:hover ul {
    display:block;
    position:absolute;
}

@media only screen and (max-width : 320px) {
    #header-wrap {
        width:95%;
        background-color:#fff;
        margin: 0 auto;
        min-height:100px;
        border-radius: 5px 5px 0px 0px;
    }

    nav li {
        display: block;
        float: none;
        width: 100%;
    }

    nav li a {
        border-bottom: 1px solid #576979;
    }

    nav li:hover ul {
        display:block;
    }

    nav li ul {
        width:100%;
    }

    nav li ul li {
        display:none;
        padding-left:10px;
        width:100%;
    }              
}

Answer 1

在您的定义中，您设置位置：绝对全局

nav li:hover ul {
    display:block;
    position:absolute;
}

现在有两种方法。只需在您需要的媒体查询中定义position：absolute，或在媒体查询中将其恢复到正常的位置。在你的情况下：

@media only screen and (max-width : 320px) {
nav li:hover ul {
    display:block;
    position: static;
}

响应式菜单和媒体查询css

1 个答案: