问题描述:

I am trying to make responsive menu bar and for that i am using media

queries. So i am using this css code and using position:absolute

property so my header don't expand with drop down menu

position:absolute property automatically applies on other media query

so how i can prevent it ??

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

}

}

网友答案:

In your definition you set the position:absolute global

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

There are now two ways. Only define position:absolute in the media query you need it or revert it in your media query where it should be normal. In your case also:

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