如何使我的導航欄響應

Question

我想使用媒體查詢使我的導航欄響應。

@media screen and (max-width: 600px) { 
 
    .nav-wrap { 
 
    position: relative; 
 
    min-height: 40px; 
 
    } 
 
    .nav-wrap ul { 
 
    position: absolute; 
 
    } 
 
    .nav-wrap li { 
 
    display: none; /* hide all <li> items */ 
 
    margin: 0; 
 
    } 
 
    .nav-wrap .current_page_item { 
 
    display: block; /* show only current <li> item */ 
 
    } 
 
    .nav-wrap ul:hover li { 
 
    display: block; 
 
    margin: 0 0 5px; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="nav-wrap"> 
 
    <ul class="group" id="example-one"> 
 
     <li class="current_page_item"><a href="#">Home</a></li> 
 
     <li><a href="#">Movies</a></li> 
 
     <li><a href="#">EVENTS</a></li> 
 
     <li><a href="#">Booking</a></li> 
 
     <li><a href="#">Sign In</a></li> 
 
     <li><a href="#">Theatres</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
    </ul>         
 
    </div> 
 
</div>

但沒有奏效。我究竟做錯了什麼？

Answer 1

這應該工作：

@media only screen and (max-width: 600px) { 
    (...) 
} 

注意，IE8及以下不支持媒體查詢。