【发布时间】：2020-01-03 00:05:38
【问题描述】：
通常，我没有任何问题来做一个适合桌面屏幕、智能手机或平板电脑的响应式网站，只需以“em”或百分比进行引用，并避免许多“宽度”。但是现在，我在多级列表中尝试响应，但没有成功，甚至尝试强制媒体查询。 我在互联网上的一些网站上得到的多层次想法。 请问，有人可以帮我吗？为什么这段代码没有响应？
body, html {
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 100%;
}
#optList {
width: 100%;
/* background: #e5e5e5; */
}
#optList ul {
list-style-type: none; /* to avoid list dot */
}
#optList label{
background-color: #297fb8;
border-radius: 7px;
padding: 0.5em 0.7em 0.5em 1.7em; /* distance to start text at label */
color: white;
}
#optList li {
margin: 1em 0em 1em 0em;
padding: 0.5em; /* 3px ? space around the label */
border-radius: 7px;
}
#optList input[type=checkbox] {
display: none; /* to avoid checkbox */
}
#optList input[type=checkbox] ~ ul { /* hidden subcategories trans=1 */
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
}
#optList input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
width: 90%;
}
#optList input[type=checkbox] + label:before { /* pointer 25,50 trans .5 */
transform-origin: 25% 50%; /* pointer */
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin: 1px 0px 0px -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
position: relative;
}
#optList input[type=checkbox]:checked + label:before {
transform: rotate(90deg); /* pointer turn right */
}
@media screen and (min-width: 800px) { body { font-size: 1.0em; } }
@media screen and (min-width: 500px) { body { font-size: 1.3em; } }
@media screen and (min-width: 250px) { body { font-size: 1.6em; } } /* min-width if screen equal or greather min-width, consider */<body>
<nav id="optList">
<ul>
<li><input type="checkbox" id="op0"/><label for="op0">LEVEL ZERO</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" id="op1"/><label for="op1">LEVEL ONE</label>
<ul>
<li><input type="checkbox" id="op11"/><label for="op11">LEVEL ONE - OP1</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
<li><input type="checkbox" id="op12"/><label for="op12">LEVEL ONE - OP2</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" id="op2"/><label for="op2">LEVEL TWO</label>
<ul>
<li><input type="checkbox" id="op21"/><label for="op21">LEVEL TWO - OP1</label>
<ul>
<li><input type="checkbox" id="op21a"/><label for="op21a">LEVEL TWO - OP1 - A</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
<li><input type="checkbox" id="op21b"/><label for="op21b">LEVEL TWO - OP1 - B</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>【问题讨论】：
标签： html css responsive-design multi-level