0
我想讓我的菜單崩潰並且只使用CSS進行擴展。我只找到了這個解決方案，並查看了其他論壇帖子，但仍無法使其正常工作。任何幫助將不勝感激。當複選框被選中時，下拉式菜單不會顯示
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #c3c3c3;
}
.logo {
float: left;
}
.imgfull {
width: 100%;
height: auto;
}
.nav {
float: right;
margin: -22px 57px 0 0;
}
.nav ul {
padding: 0;
margin: 25px 0 0 -15px;
}
.nav ul li {
display: inline;
margin: 0 0 0 25px;
}
.nav ul li a {
background-color: #c3c3c3;
color: #9a0000;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
}
.nav ul li a:hover {
background-color: #000000;
color: #ffffff;
}
.navlog {
float: right;
margin: 12px 50px 0 0;
}
.navlog ul {
list-style: none;
padding: 0;
margin: 0 0 0 0;
font-weight: bold;
text-align: center;
}
.navlog ul li {
display: block;
margin: 20px 0;
}
.navlog ul li a {
background-color: #9a0000;
color: #000000;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
}
.navlog ul li a:hover {
background-color: #000000;
color: #ffffff;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .nav {
display: block;
}
@media (max-width: 48.000em) {
.nav {
width: 100%;
margin: 0 0 0 50px;
}
.nav ul {
width: 100%;
font-weight: normal;
margin: auto;
position: static;
display: none;
}
.nav ul li {
width: 100%;
text-align: center;
margin: auto;
}
.nav ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.nav ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
.nav ul li,
li a {
width: 100%;
}
.show-menu {
display: block;
}
}
@media (max-width: 48.000em) {
.navlog {
width: 100%;
margin: 0 0 0 50px;
}
.navlog ul {
width: 100%;
font-weight: normal;
margin: 0 0 -35px 0;
}
.navlog ul li {
width: 100%;
text-align: center;
margin: auto;
}
.navlog ul li:nth-of-type(odd) a {
border-right: 1px solid #ccc;
}
.navlog ul li a {
padding: 8px 0px;
border-bottom: 1px solid #ccc;
display: block;
}
}<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button"/>
<div class="nav">
<ul class="show-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Application Process</a></li>
<li><a href="#">Rental Listings</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Tenant Information</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<br clear="both"/>
嘗試加入此https://jsfiddle.net/小提琴 – Chris
只包含最小的代碼，必然再現該問題，您可能能夠在發佈之前找出問題。注意，針對'input [type = checkbox]'效率不高，只要使用'＃show-menu'和'＃show-menu：checked'會好很多，因爲你已經爲元素指定了id 。 – Stickers