css3 - responsive menu and media query css -
i trying make responsive menu bar , using media queries. using css code , using position:absolute
property header don't expand drop down menu position:absolute
property automatically applies on other media query how can prevent ??
nav li:hover ul { display:block; position:absolute; } @media screen , (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 { 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 definition set position:absolute global
nav li:hover ul { display:block; position:absolute; }
there 2 ways. define position:absolute in media query need or revert in media query should normal. in case also:
@media screen , (max-width : 320px) { nav li:hover ul { display:block; position: static; }
Comments
Post a Comment