响应式菜单和媒体查询 (CSS)答案

【问题标题】：Responsive menu and media query (CSS)响应式菜单和媒体查询 (CSS)
【发布时间】：2020-03-23 19:32:29
【问题描述】：

我正在尝试制作响应式菜单栏，为此我正在使用媒体查询。所以我正在使用这个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%;
    }              
}

【问题讨论】：

标签： css drop-down-menu responsive-design css-position media-queries

【解决方案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;
}

【讨论】：