1
私はレスポンシブメニューをデザインしようとしています。関連のCSSのIDはLiでない場合CSSのチェックボックス条件
#web-menu {
max-width: 1235px;
width: 100%;
margin: 0 auto;
background: #444;
text-align: left;
font-weight: bold;
overflow: hidden;
padding: 0 15px 0 15px;
display: block;
}
#web-menu li {
list-style: none;
float: left;
}
#web-menu li a {
color: #fff;
background: #444;
text-decoration: none;
line-height: 37px;
padding: 0 15px 0 15px;
display: block;
}
#web-menu li > ul {
display: none;
width: 20em;
/* Width to help Opera out */
z-index: 10;
font-weight: normal;
}
#web-menu li:hover > ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#web-menu li:hover li {
float: none;
border-bottom: 1px solid #fff;
}
#web-menu a:hover {
color: #FFFFFF;
background: #1a1a1a;
}
#web-menu a:active {
background: #444;
/*turns this color briefly when link is selected*/
color: #FFFFFF;
}
@media only screen and (max-width: 900px),
only screen and (max-device-width: 900px) {
#web-menu {
display: none;
}
#web-menu li:hover > ul {
display: none;
}
#web-menu li {
width: 100%;
}
[id=main-mobile-menu]:checked ~ #web-menu {
display: block;
}
[id=mobile-menu-1]:checked + #web-menu li > ul {
display: block;
}
}<label for="main-mobile-menu">Show Menu</label>
<input type="checkbox" id="main-mobile-menu" role="button">
<ul id="web-menu">
<li id="web-menu-home"><a href="index.php">Home</a>
</li>
<li>
<input type="checkbox" id="mobile-menu-1" role="button">
<label for="mobile-menu-1" class="mobile-menu1">Show Menu</label>
<a href="#">E-Resources</a>
<ul>
<li id="web-menu-top"><b>Resources</b>
</li>
<li id="web-menu-cdcs"><a href="/index.php?page_id=39">Tests</a>
</li>
</ul>
</li>
</ul>問題はあるが、チェックボックスのラベルのみが働いている：
は、ここに私のコードです。私は間違っているのですか？
ありがとうございました！
'for'属性のみform要素のidに取り組んでいます。 – zer00ne