如何使我的导航栏响应
How to make my nav bar responsive
我想使用媒体查询使我的导航栏响应。
@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>
但是没有用。我做错了什么?
这应该有效:
@media only screen and (max-width: 600px) {
(...)
}
请注意,IE8 及以下版本不支持媒体查询。
我想使用媒体查询使我的导航栏响应。
@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>
但是没有用。我做错了什么?
这应该有效:
@media only screen and (max-width: 600px) {
(...)
}
请注意,IE8 及以下版本不支持媒体查询。